Simple, small and fast JavaScript/jQuery polyfill for the HTML5 <input type="range"> slider element.

Download v2.3.0

This project is on GitHub.



The rangeslider.js API is compatible with the standard HTML input methods.


Simply calling something like this will just work.


The easiest way to install the files is with Bower or npm.

bower install --save rangeslider.js
npm install --save rangeslider.js

rangeslider.js is also hosted on cdnjs and jsdelivr.

Download latest and greatest manually: rangeslider.js-2.3.0.zip


Using rangeslider.js is simple. Configuration over attributes.

    min="10"                    // default 0
    max="1000"                  // default 100
    step="10"                   // default 1
    value="300"                 // default min + (max-min)/2
    data-orientation="vertical" // default horizontal
<script src="jquery.min.js"></script>
<script src="rangeslider.min.js"></script>
    // Initialize a new plugin instance for all
    // e.g. $('input[type="range"]') elements.

    // Destroy all plugin instances created from the
    // e.g. $('input[type="range"]') elements.

    // Update all rangeslider instances for all
    // e.g. $('input[type="range"]') elements.
    // Usefull if you changed some attributes e.g. `min` or `max` etc.
    $('input[type="range"]').rangeslider('update', true);



    // Feature detection the default is `true`.
    // Set this to `false` if you want to use
    // the polyfill also in Browsers which support
    // the native <input type="range"> element.
    polyfill: true,

    // Default CSS classes
    rangeClass: 'rangeslider',
    disabledClass: 'rangeslider--disabled',
    horizontalClass: 'rangeslider--horizontal',
    verticalClass: 'rangeslider--vertical',
    fillClass: 'rangeslider__fill',
    handleClass: 'rangeslider__handle',

    // Callback function
    onInit: function() {},

    // Callback function
    onSlide: function(position, value) {},

    // Callback function
    onSlideEnd: function(position, value) {}


Negative attributes

Floating point boundaries

Programmatic value changes

Programmatic attribute changes

Destroy a plugin instance

Orientation support

For more examples checkout the rangeslider.js CodePen collection.

Bug Reports & Feature Requests

Feel free to contribute. Submit a Pull Request or open an issue for further discussion.


For a full changelog, visit the releases page on GitHub.

This project utilizes SemVer for versioning releases and maximum backward compatibility.


This project is under the Open Source MIT license.