This time I will share jQuery Plugin and tutorial about Slim Custom Duration Slider In jQuery – Slider.js, hope it will help you in programming stack.
A small jQuery plugin to create a slim, customizable duration slider which can be used as a progress bar to indicate the current/duration time of your audio & video file.
How to use it:
1. Include the main JavaScript Slider.js after jQuery JavaScript library.
1 |
<script src="/path/to/jquery.min.js"></script> |
2 |
<script src="/path/to/Slider.js"></script> |
2. Create a container element to hold the duration slider.
1 |
<div id="example" class="silder-wrap"></div> |
3. Create a new duration slider instance and speicfy the total duration in seconds.
1 |
let mySlider = new Slider({ |
4. Append the duration slider to the container you just created.
1 |
$('#example').append(mySlider.getSlider()); |
5. Customize the appearance of the duration slider.
01 |
let mySlider = new Slider({ |
08 |
backgroundColor: 'lightgrey', |
20 |
ballRadius: parseFloat(this.height)*1.5 |
35 |
indicatorColor: '#778899' |
38 |
indicatorTextColor: 'black' |
6. Get the value as you drag the handler.
01 |
let mySlider = new Slider({ |
04 |
valueChanging: function(value){ |
09 |
valueChanged: function(progress){ |
7. Set the current/total duration time.
1 |
mySlider.setCurrent(progress); |
2 |
mySlider.setDuration(duration); |
This awesome jQuery plugin is developed by mklls. For more Advanced Usages, please check the demo page or visit the official website.
