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


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

<link href="" rel="stylesheet">
<link href="timebar.min.css" rel="stylesheet" />
<script src=""></script>
<script src="timebar.min.js"></script>


Create simple html div where timebar will display.

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

With custom controls.

				<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> 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" />
				<!-- <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> Duration:
				<label id='duration'>0 Sec</label>


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);
				pointerClicked(time) {
					const selectedTime = timebar.formatTime(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.


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.