rangeslider.js

Installation

The easiest way to install the files is with Bower.

bower install --save rangeslider.js

You can also do it the old school way and download a zip file.

Usage

Using rangeslider.js is simple. Configuration over attributes.

<input type="range" min="10" max="1000" step="10" value="300">

<script src="jquery.min.js"></script>
<script src="rangeslider.min.js"></script>
<script>
    $('input[type="range"]').rangeslider();
</script>

Options

<script>
    $('input[type="range"]').rangeslider({
        
        // Feature detection
        polyfill: true,
        
        // CSS classes
        baseClass: 'rangeslider',
        rangeClass: 'rangeslider__range',
        fillClass: 'rangeslider__fill',
        handleClass: 'rangeslider__handle',
        
        // Callback function
        onInit: function() {},
        
        // Callback function
        onSlide: function(position, value) {},
        
        // Callback function
        onSlideEnd: function(position, value) {}
    });
</script>