rangeslider.js

Features

Touchscreen friendly
Recalculates onresize so suitable for use within responsive designs
Small and fast
Supports all major browsers including IE8+

API

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

$('input[type="range"]').val(10).change();

Simply calling something like this will just work.

Installation

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

bower install --save rangeslider.js

npm install --save rangeslider.js

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

rangeslider.js is also hosted on jsdelivr.

For past releases and changelog, check out the Github releases page.

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>
    // Initialize a new plugin instance for all
    // e.g. $('input[type="range"]') elements.
    $('input[type="range"]').rangeslider();

    // Destroy all plugin instances created from the
    // e.g. $('input[type="range"]') elements.
    $('input[type="range"]').rangeslider('destroy');
</script>

Options

$('input[type="range"]').rangeslider({

    // 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',
    fillClass: 'rangeslider__fill',
    handleClass: 'rangeslider__handle',

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

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

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

Examples

Negative attributes

Floating point boundaries

Programmatic value changes

Destroy a plugin instance

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.