Slim Custom Duration Slider In jQuery - Slider.js

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.

<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/Slider.js"></script>

2. Create a container element to hold the duration slider.

<div id="example" class="silder-wrap"></div>

3. Create a new duration slider instance and speicfy the total duration in seconds.

let mySlider = new Slider({
    Duration: 600
});

4. Append the duration slider to the container you just created.

$('#example').append(mySlider.getSlider());

5. Customize the appearance of the duration slider.

let mySlider = new Slider({

    // width/height of the duration slider
    width: '600px'
    height: '3px'

    // background color
    backgroundColor: 'lightgrey',

    // bar color
    barColor: 'deeppink'

    // shows drag handler
    hasBall: true

    // handler color
    ballColor: '#29AFFF'

    // border radius of handler
    ballRadius: parseFloat(this.height)*1.5

    // step size
    scale: 2

    // always shows the handler
    alwayShowBall: false

    // shows current/total duration
    formatProgress: false

    // shows indicator
    hasIndicator: true

    // background color of indicator
    indicatorColor: '#778899'

    // text color
    indicatorTextColor: 'black'
    
});

6. Get the value as you drag the handler.

let mySlider = new Slider({

    // when dragging
    valueChanging: function(value){
      // do something
    }

    // after drag
    valueChanged: function(progress){
      // do something
    }

});

7. Set the current/total duration time.

mySlider.setCurrent(progress);
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.