Ion.RangeSlider Interactions Demo Page

Feedback and support

If you find some bugs or missing functional in plugins, use Issues page on GitHub

Support

Support ion.RangeSlider «Patreon»
Bitcoin 13vdgT6EoAVupdGuLhE4ABW245NTixAj1G

Adv

Range Slider customizing demos

← try to resize page →

Choose skin

Flat UI skin Modern skin HTML5 skin Nice white skin Simple dark skin

Sliders callbacks demo

$("#range_43").ionRangeSlider({
    type: "single",
    min: 0,
    max: 100,
    from: 50,
    keyboard: true,
    onStart: function (data) {
        console.log("onStart");
    },
    onChange: function (data) {
        console.log("onChange");
    },
    onFinish: function (data) {
        console.log("onFinish");
    },
    onUpdate: function (data) {
        console.log("onUpdate");
    }
});
There are four different callbacks:
start change finish update
$("#range_44").ionRangeSlider({
    type: "double",
    min: 1000,
    max: 5000,
    from: 2000,
    to: 4000,
    step: 100,
    onStart: function (data) {
        console.log(data);
    },
    onChange: : function (data) {
        console.log(data);
    },
    onFinish: : function (data) {
        console.log(data);
    },
    onUpdate: : function (data) {
        console.log(data);
    }
});
Tracking range slider values:

                                
$("#range_45").ionRangeSlider({
    type: "double",
    values: [
        "one", "two", "three",
        "four", "five", "six",
        "seven", "eight", "nine", "ten"
    ],
    onStart: function (data) {
        console.log(data);
    },
    onChange: : function (data) {
        console.log(data);
    },
    onFinish: : function (data) {
        console.log(data);
    },
    onUpdate: : function (data) {
        console.log(data);
    }
});
Another example of using callbacks:

                                
$("#range_46").ionRangeSlider({
    type: "single",
    min: 1000,
    max: 5000,
    from: 2000,
    step: 100,
    onStart: function (data) {
        console.log(data.from);
    },
    onChange: : function (data) {
        console.log(data.from);
    },
    onFinish: : function (data) {
        console.log(data.from);
    },
    onUpdate: : function (data) {
        console.log(data.from);
    }
});
Tracking only slider value:

Range slider onChange event listening

var $range = $("#range_47");

$range.ionRangeSlider({
    type: "single",
    min: 0,
    max: 100,
    from: 50
});

$range.on("change", function () {
    var $this = $(this),
        value = $this.prop("value");

    console.log("Value: " + value);
});
Using onChange event, triggered on base input element.
var $range = $("#range_48");

$range.ionRangeSlider({
    type: "double",
    min: 0,
    max: 100,
    from: 20,
    to: 80
});

$range.on("change", function () {
    var $this = $(this),
        value = $this.prop("value").split(";");

    console.log(value[0] + " - " + value[1]);
});
Reading values for double slider:
var $range = $("#range_49");

$range.ionRangeSlider({
    type: "double",
    min: 1000,
    max: 5000,
    from: 2000,
    to: 4000
});

$range.on("change", function () {
    var $this = $(this),
        from = $this.data("from"),
        to = $this.data("to");

    console.log(from + " - " + to);
});
Reading values from data attributes:

Range slider public methods

// Start slider
$("#range_50").ionRangeSlider({
    type: "double",
    min: 0,
    max: 1000,
    from: 200,
    to: 500,
    grid: true
});

// Save slider instance to var
var slider = $("#range_50").data("ionRangeSlider");

// Call sliders update method with any params
slider.update({
    min: 100,
    max: 500,
    from: 150,
    to: 450,
    step: 50
    // etc.
});
If plugin is already started and you want to change something, use method update:
// Start slider
$("#range_50a").ionRangeSlider({
    type: "single",
    values: ["one", "two", "three"]
});

// Save slider instance to var
var slider = $("#range_50a").data("ionRangeSlider");

// Call sliders update method with any params
slider.update({
    values: [
        "one", "two", "three",
        "four", "five", "six", "seven"
    ]
});
You can totally change sliders params, using method update:
// Start slider
$("#range_51").ionRangeSlider({
    type: "double",
    min: 0,
    max: 1000,
    from: 200,
    to: 500,
    grid: true
});

// Save slider instance to var
var slider = $("#range_51").data("ionRangeSlider");

// Call sliders reset method
slider.reset();
If you changed something and want to reset slider to original values, use method reset:
var $range = $("#range_52"),
    $create_btn = $(".js-create-52"),
    $destroy_btn = $(".js-destroy-52"),
    slider;

var create = function () {
    $range.ionRangeSlider({
        type: "double",
        min: 0,
        max: 1000,
        grid: true
    });

    slider = $range.data("ionRangeSlider");
};

$create_btn.on("click", function () {
    create();
});

$destroy_btn.on("click", function () {
    slider && slider.destroy();
});
Or if you don't need slider any more, call destroy method. It will restore original input field to it's basic look

Using input value to set the sliders range

var $range = $("#range_53"),
    $create_btn = $(".js-create-53"),
    $destroy_btn = $(".js-destroy-53"),
    slider;

var create = function () {
    $range.ionRangeSlider({
        type: "double",
        values: [
            "A","B","C","D","E",
            "F","G","H","I","J"
        ],
        grid: true
    });

    slider = $range.data("ionRangeSlider");
};

$create_btn.on("click", function () {
    create();
});

$destroy_btn.on("click", function () {
    slider && slider.destroy();
});
Slider will read it's start values from input
var $range = $("#range_54"),
    $create_btn = $(".js-create-54"),
    $destroy_btn = $(".js-destroy-54"),
    slider;

var create = function () {
    $range.ionRangeSlider({
        type: "double",
        values: [
            1, 10, 100, 1000, 10000
        ],
        grid: true
    });

    slider = $range.data("ionRangeSlider");
};

$create_btn.on("click", function () {
    create();
});

$destroy_btn.on("click", function () {
    slider && slider.destroy();
});
Testing input

Disable and block slider

var $range = $("#range_55");
var $disable_btn = $(".js-disable-55");
var $block_btn = $(".js-block-55");

var disabled = false;
var blocked = false;
var slider;

$range.ionRangeSlider({
    type: "single",
    min: 0,
    max: 50,
    from: 25,
    grid: true
});

slider = $range.data("ionRangeSlider");

$disable_btn.on("click", function () {
    if (disabled) {
        slider.update({"disable": false});
        disabled = false;
    } else {
        slider.update({"disable": true});
        disabled = true;
    }
});

$block_btn.on("click", function () {
    if (blocked) {
        slider.update({"block": false});
        blocked = false;
    } else {
        slider.update({"block": true});
        blocked = true;
    }
});
Testing input
Fork me on GitHub