Modern Fancy Time Duration Picker jQuery Plugin – timeBar.js

by

Here going to introduce a creative jQuery time duration picker jQuery plugin which makes it easy to select a time duration in seconds from a fancy horizontal time bar that gives the selected time with cuepoint feature. It is a timebar where user can set cuepoints at a specific time and get selected time by clicking on cuepoints or timebar.It is useful for video streaming applications where user want to perform any specific task on a particular time interval.
Time Duration Picker jQuery Plugin


Integrate Time Duration Picker jQuery Plugin

Libraries

Include all the dependent libraries (bootstrap+jQuery) with plugins library.

HTML

Create simple html div where timebar will display.

With custom controls.


				
				
				
				
				

				
 Show
				 Hide
				
				

				

				
				
				

				
 Duration:



JS

Initialize the plugin and specify an array of preset points as follows:

$(document).ready(function () {

			const timebar = $("#timelineId").timebar({
				totalTimeInSecond: 550,
				cuepoints: [0, 110, 220, 330, 440, 550],
				width: '1000px',
				multiSelect: true,
				barClicked(time) {
					const selectedTime = timebar.formatTime(time);
					$("#duration").text(selectedTime);
				},
				pointerClicked(time) {
					const selectedTime = timebar.formatTime(time);
					$("#duration").text(selectedTime);
					$('#add-input').val(time);
				}
			});
});

Here is the list of All default options to customize the time bar.

const timebar = $("#timelineId").timebar({
      element: null,
      totalTimeInSecond: 0,
      cuepoints: [],
      width: 0,
      globalPageX: 0,
      selectedTime: 0,
      multiSelect: false,
      showCuepoints: true,
});

List of Methods

  1. addCuepoints : pass time in seconds,func(integer)
  2. updateSelectedCuepoint: pass new time in seconds,func(integer)
  3. deleteSelectedCuepoints: func()
  4. showHideCuepoints : accept value in true or false,func(boolean)
  5. getSelectedTime : return time in seconds, func
  6. setSelectedTime: pass time in seconds, func(integer)
  7. getTotalTime : return total time in seconds, func
  8. setTotalTime : pass time in seconds , func(integer)
  9. getWidth : return width ,func()
  10. setWidth : pass width , func(string)
  11. getCuepoints : return cuepoints in array, func()

See live demo and download source code.

DEMO | DOWNLOAD

Visit official github repository for more information and follow for future updates. Don’t forget to read license for using this plugin in your projects.


Published by Rohit