Getting Started

Learn how to easily start using Ion.RangeSlider plugin in your projects


Go to CSS folder to get latests styles for plugin. Go to JS folder to get latest JS file. Ion.RangeSlider comes with 6 build-in skins. If you want to modify any of skins, or add a new one - go to LESS folder in zip-archive. Download latest jQuery library.



Use CDNjs or JSdelivr to get latest version of plugin and jQuery.

    <!--Plugin CSS file with desired skin-->
    <link rel="stylesheet" href=""/>
    <script src=""></script>
    <!--Plugin JavaScript file-->
    <script src=""></script>


Use NPM to download latest version of a plugin and install it directly in to your project.

    npm install ion-rangeslider


Use Bower to download latest version of a plugin and install it directly in to your project.

    bower install ion-rangeslider


Use Yarn to download latest version of a plugin and install it directly in to your project.

    yarn add ion-rangeslider


After all assets were connected, time has come to create an Ion.RangeSlider instance. First, it will require to create simple input element on the page. Or several input elements.

    <input type="text" class="js-range-slider" name="my_range" value="" />

Next step - initialise instance(s) of Ion.RangeSlider. We will call ionRangeSlider() method for jQuery element.


Setup with params

You can set variety of parameters to every Ion.RangeSlider instance. Example:

        type: "double",
        min: 0,
        max: 1000,
        from: 200,
        to: 500,
        grid: true

Setup with data-* attributes

It is possible to modify almost every param using data-* attributes

    <input type="text" class="js-range-slider" name="my_range" value=""

And then just call ionRangeSlider() without arguments.


Using public methods

Range slider has several public methods to control its behavior, create and destroy its instance.

    // 1. Initialise range slider instance
    // 2. Save instance to variable
    let my_range = $(".js-range-slider").data("ionRangeSlider");
    // 3. Update range slider content (this will change handles positions)
        from: 300,
        to: 400
    // 4. Reset range slider to initial values
    // 5. Destroy instance of range slider

Using callbacks

Where are 4 callbacks. onStart, onChange, onFinish and onUpdate. Each callback will receive data object with current range sliders state.

        onStart: function (data) {
            // Called right after range slider instance initialised
            console.log(data.input);        // jQuery-link to input
            console.log(data.slider);       // jQuery-link to range sliders container
            console.log(data.min);          // MIN value
            console.log(data.max);          // MAX values
            console.log(data.from);         // FROM value
            console.log(data.from_percent); // FROM value in percent
            console.log(data.from_value);   // FROM index in values array (if used)
            console.log(;           // TO value
            console.log(data.to_percent);   // TO value in percent
            console.log(data.to_value);     // TO index in values array (if used)
            console.log(data.min_pretty);   // MIN prettified (if used)
            console.log(data.max_pretty);   // MAX prettified (if used)
            console.log(data.from_pretty);  // FROM prettified (if used)
            console.log(data.to_pretty);    // TO prettified (if used)
        onChange: function (data) {
            // Called every time handle position is changed
        onFinish: function (data) {
            // Called then action is done and mouse is released
        onUpdate: function (data) {
            // Called then slider is changed using Update public method

JavaScript API

Check full API description to get information about all plugin settings, methods and callback.

JavaScript API