JavaScript API

A slider is built from a handle (also called a thumb, .irs-handle) that the user drags, a value label above each handle (.irs-single, .irs-from, .irs-to), a min label and a max label at the ends (.irs-min, .irs-max), the interval bar (.irs-bar), which runs between the two handles in double type and from the left edge to the handle in single type, the track the handles move along (.irs-line), and the grid, which is tick marks (.irs-grid-pol) with grid labels (.irs-grid-text).

Callback data

Every callback receives one object as its first argument:

    {
        "input": object,            // jQuery reference to the input
        "slider": object,           // jQuery reference to the slider container
        "min": 0,                   // MIN value
        "max": 100000,              // MAX value
        "from": 10000,              // FROM value
        "from_percent": 10,         // FROM value in percent
        "from_value": null,         // entry from the values array (null unless values is used)
        "from_min": null,           // FROM minimum limit (null if unset)
        "from_max": null,           // FROM maximum limit (null if unset)
        "to": 90000,                // TO value
        "to_percent": 90,           // TO value in percent
        "to_value": null,           // entry from the values array (null unless values is used)
        "to_min": null,             // TO minimum limit (null if unset)
        "to_max": null,             // TO maximum limit (null if unset)
        "min_pretty": "0",          // MIN formatted
        "max_pretty": "100 000",    // MAX formatted
        "from_pretty": "10 000",    // FROM formatted
        "to_pretty": "90 000"       // TO formatted
    }
    

Every callback receives the same object, which the plugin rewrites on every change; copy it (for example with $.extend({}, data)) if you need to keep a snapshot.

In values mode from and to hold the index of the selected entry, not the entry itself. from_value and to_value hold the entry at that index, and from_pretty and to_pretty hold its formatted label. min and max hold the first and last index of the values array. A numeric-looking entry such as "20.0" comes back as the number 20 unless values_raw is set.

Public methods

Calling ionRangeSlider() again on an input that already has a slider does nothing. To change settings, take the instance from $(input).data("ionRangeSlider") and call update() on 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();
    

Demos

Time to see some range sliders in action!

Demo