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.