Interactions demo

Interact with Ion.RangeSlider using JavaScript

Callbacks

Using sliders callbacks

onStart

onChange

onFinish

onUpdate


    $("#demo_0").ionRangeSlider({
        skin: "big",
        min: 0,
        max: 10,
        from: 5,
        onStart: function (data) {
            // fired then range slider is ready
        },
        onChange: function (data) {
            // fired on every range slider update
        },
        onFinish: function (data) {
            // fired on pointer release
        },
        onUpdate: function (data) {
            // fired on changing slider with Update method
        }
    });

Reading data from slider

Using callbacks to read data (normal values). More information about callbacks DATA object


    $("#demo_1").ionRangeSlider({
        type: "double",
        min: 0,
        max: 10000,
        from: 5000,
        to: 8000,
        onChange: function (data) {
            console.dir(data);
        }
    });

Using callbacks to read data (predefined values). More information about callbacks DATA object


    $("#demo_2").ionRangeSlider({
        type: "double",
        values: [
            "Jan", "Feb", "Mar", "Apr", "May", "Jun",
            "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"
        ],
        from: 1,
        to: 10,
        onChange: function (data) {
            console.dir(data);
        }
    });

Using onChange event

Using event listener attached to base input element (for type "single")


    var $d3 = $("#demo_3");
    
    $d3.ionRangeSlider({
        skin: "big",
        min: 0,
        max: 10000,
        from: 5000
    });
    
    $d3.on("change", function () {
        var $inp = $(this);
        var from = $inp.prop("value"); // reading input value
        var from2 = $inp.data("from"); // reading input data-from attribute
    
        console.log(from, from2); // FROM value
    });

Using event listener attached to base input element (for type "double")


    var $d4 = $("#demo_4");
    
    $d4.ionRangeSlider({
        skin: "big",
        min: 0,
        max: 10000,
        from: 4000,
        to: 6000
    });
    
    $d4.on("change", function () {
        var $inp = $(this);
        var v = $inp.prop("value");     // input value in format FROM;TO
        var from = $inp.data("from");   // input data-from attribute
        var to = $inp.data("to");       // input data-to attribute
    
        console.log(v, from, to);       // all values
    });

Range Slider public methods

Update range slider to a new values (will rebuild slider instance)


    var $d5 = $("#demo_5");
    var $d5_buttons = $(".js-btn__d5");
    $d5.ionRangeSlider({
        skin: "big",
        type: "double",
        min: 0,
        max: 10,
        from: 4,
        to: 6,
        grid: true,
        step: 2
    });
    
    var d5_instance = $d5.data("ionRangeSlider");
    $d5_buttons.on("click", function () {
        var min = rand(0, 1000);
        var from = rand(min, min + 2000);
        var to = rand(from, from + 5000);
        var max = rand(to, to + 2000);
        var num = rand(4, 15);
        var step = rand(1, 100);
    
        d5_instance.update({
            min: min,
            max: max,
            from: from,
            to: to,
            grid_num: num,
            step: step
        });
    });
    
    function rand (min, max) {
        return Math.floor(Math.random() * (max - min + 1)) + min;
    }

Different implementations

Check how others are using Ion.RangeSlider

Showcase

Callbacks Reading data Using onChange event Range Slider methods