Ion.RangeSlider Interactions Demo Page

Feedback and support

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

Click here to lend your support to: Nokia Lumia for plugins testing and make a donation at pledgie.com !

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