Getting Started

Download

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.

Download

CDN

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

    <!--Plugin CSS file with desired skin-->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.3.1/css/ion.rangeSlider.min.css"/>
    
    <!--jQuery-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    
    <!--Plugin JavaScript file-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.3.1/js/ion.rangeSlider.min.js"></script>
    

NPM

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

    npm install ion-rangeslider
    

Bower

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

    bower install ion-rangeslider
    

Yarn

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

    yarn add ion-rangeslider
    

Setup

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.

    $(".js-range-slider").ionRangeSlider();
    

Setup with params

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

    $(".js-range-slider").ionRangeSlider({
        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=""
        data-type="double"
        data-min="0"
        data-max="1000"
        data-from="200"
        data-to="500"
        data-grid="true"
    />
    

And then just call ionRangeSlider() without arguments.

    $(".js-range-slider").ionRangeSlider();
    

Using public methods

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

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

Using callbacks

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

    $(".js-range-slider").ionRangeSlider({
        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(data.to);           // 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
    
            console.log(data.from);
        },
    
        onFinish: function (data) {
            // Called then action is done and mouse is released
    
            console.log(data.to);
        },
    
        onUpdate: function (data) {
            // Called then slider is changed using Update public method
    
            console.log(data.from_percent);
        }
    });
    

JavaScript API

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

JavaScript API