Modern Fancy Time Duration Picker jQuery Plugin – timeBar.js

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.

<!--CSS-->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
<link href="timebar.min.css" rel="stylesheet" />
 
<!--JS-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="timebar.min.js"></script>

HTML

Create simple html div where timebar will display.

<div id='timelineId'></div>

With custom controls.

<div>
				<input id="add-input" class="pull-left" type='text' placeholder="Enter time in seconds" />
				<input id="add-btn" class='btn btn-primary btn-sm' type='button' value="Add" />
				<input id="update-btn" class='btn btn-success btn-sm' type='button' value="Update" />
				<input id="rm-btn" class='btn btn-danger btn-sm' type='button' value="Delete" />
				<br>
				<br> Show
				<input class="radio-btn" type='radio' name="radio-btn" value="true" checked/> Hide
				<input class="radio-btn" type='radio' name="radio-btn" value="false" />
				<br>
				<br>
				<!-- <input id="reset-btn" class='btn btn-warning btn-sm' type='button' value="Reset" /> -->
				<input class='btn btn-info btn-sm' type='button' value='Refresh' onclick='window.location.reload();' />
				<br>
				<br> Duration:
				<label id='duration'>0 Sec</label>
			</div>



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.