Getting Started

Download

Download the archive, then take the stylesheet from the css folder and the script from the js folder. Ion.RangeSlider comes with 6 built-in skins. To change one, or to add your own, edit the sources in the less folder. You will also need the jQuery library.

Download

CDN

Load the plugin and jQuery straight from jsDelivr.

    <!--Plugin CSS file with desired skin-->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ion-rangeslider@2.5.0/css/ion.rangeSlider.min.css"/>
    
    <!--jQuery-->
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>
    
    <!--Plugin JavaScript file-->
    <script src="https://cdn.jsdelivr.net/npm/ion-rangeslider@2.5.0/js/ion.rangeSlider.min.js"></script>
    

The plugin runs on jQuery 1.8 and newer, the 3.x and 4.x lines included. If you still have to support IE8, stay on a jQuery 1.x build.

NPM

Use NPM to install the plugin into your project.

    npm install ion-rangeslider
    

pnpm

Or install it with pnpm.

    pnpm add ion-rangeslider
    

Yarn

Yarn works too.

    yarn add ion-rangeslider
    

Setup

Once the files are on the page, you can create an Ion.RangeSlider instance. It needs a simple input element to attach to, or several of them.

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

Next, initialise the slider by calling the ionRangeSlider() method on a jQuery element.

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

Setup with params

You can pass a variety of options to every instance. For example:

    $(".js-range-slider").ionRangeSlider({
        type: "double",
        min: 0,
        max: 1000,
        from: 200,
        to: 500,
        grid: true
    });
    

Setup with data-* attributes

Almost every option can also be set with a data-* attribute.

    <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

The slider has three public methods: update it, reset it, or destroy it.

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

Using callbacks

There are 5 callbacks: onStart, onInit, onChange, onFinish and onUpdate. Each callback receives a data object with the slider's current state.

    $(".js-range-slider").ionRangeSlider({
        onStart: function (data) {
            // Called right after the slider is created, before its first render
    
            console.log(data.input);        // jQuery reference to the input
            console.log(data.slider);       // jQuery reference to the slider container
            console.log(data.min);          // MIN value
            console.log(data.max);          // MAX value
            console.log(data.from);         // FROM value
            console.log(data.from_percent); // FROM value in percent
            console.log(data.from_value);   // FROM entry from the values array (if used)
            console.log(data.from_min);     // FROM minimum limit (if used)
            console.log(data.from_max);     // FROM maximum limit (if used)
            console.log(data.to);           // TO value
            console.log(data.to_percent);   // TO value in percent
            console.log(data.to_value);     // TO entry from the values array (if used)
            console.log(data.to_min);       // TO minimum limit (if used)
            console.log(data.to_max);       // TO maximum limit (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; values mode: the prettified entry, not the index)
            console.log(data.to_pretty);    // TO prettified (if used; values mode: the prettified entry, not the index)
        },
    
        onInit: function (data) {
            // Called once, right after the first render
    
            console.log(data.slider);
        },
    
        onChange: function (data) {
            // Called every time a handle moves
    
            console.log(data.from);
        },
    
        onFinish: function (data) {
            // Called when the interaction ends and the mouse is released
    
            console.log(data.to);
        },
    
        onUpdate: function (data) {
            // Called when the slider is changed with the update() method
    
            console.log(data.from_percent);
        }
    });
    

JavaScript API

See the full API description for every setting, method and callback.

JavaScript API