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.
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
- addCuepoints : pass time in seconds,func(integer)
- updateSelectedCuepoint: pass new time in seconds,func(integer)
- deleteSelectedCuepoints: func()
- showHideCuepoints : accept value in true or false,func(boolean)
- getSelectedTime : return time in seconds, func
- setSelectedTime: pass time in seconds, func(integer)
- getTotalTime : return total time in seconds, func
- setTotalTime : pass time in seconds , func(integer)
- getWidth : return width ,func()
- setWidth : pass width , func(string)
- 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.