Ion.RangeSlider Advanced 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

Keeping range slider inside it's container

$("#range_25").ionRangeSlider({
    type: "double",
    min: 1000000,
    max: 2000000,
    grid: true
});
As you see, slider labels are far away outside it's container
$("#range_26").ionRangeSlider({
    type: "double",
    min: 1000000,
    max: 2000000,
    grid: true,
    force_edges: true
});
But you can fix it with ease if you wish, with force_edges attribute:

The grid

$("#range_27").ionRangeSlider({
    type: "double",
    min: 0,
    max: 10000,
    grid: true
});
Grid will set up automatically, just set grid to true:
$("#range_28").ionRangeSlider({
    type: "double",
    min: 0,
    max: 10000,
    grid: true,
    grid_num: 10
});
Want more? Use grid_num:
$("#range_29").ionRangeSlider({
    type: "double",
    min: 0,
    max: 10000,
    step: 500,
    grid: true,
    grid_snap: true
});
Have predifined step? You can snap grid to it:
$("#range_30").ionRangeSlider({
    type: "single",
    min: 0,
    max: 10,
    step: 2.34,
    grid: true,
    grid_snap: true
});
Even if you have a very strange step!

Lock handles

$("#range_31").ionRangeSlider({
    type: "double",
    min: 0,
    max: 100,
    from: 30,
    to: 70,
    from_fixed: true
});
Sometimes you want to forbid dragging one or both handles. Try to move left handle, you can't.
$("#range_32").ionRangeSlider({
    type: "double",
    min: 0,
    max: 100,
    from: 30,
    to: 70,
    from_fixed: true,
    to_fixed: true
});
You can even lock both handles

Movement limits

$("#range_33").ionRangeSlider({
    min: 0,
    max: 100,
    from: 30,
    from_min: 10,
    from_max: 50
});
Sometimes you may want to show user full slider, but restict him from using it for 100%. The limits is the tool for you. Try to drag slider, you will see, it has invisible borders on 10 and 50.
$("#range_34").ionRangeSlider({
    min: 0,
    max: 100,
    from: 30,
    from_min: 10,
    from_max: 50,
    from_shadow: true
});
You can also highlight this zone:
$("#range_35").ionRangeSlider({
    type: "double",
    min: 0,
    max: 100,
    from: 20,
    from_min: 10,
    from_max: 30,
    from_shadow: true,
    to: 80,
    to_min: 70,
    to_max: 90,
    to_shadow: true,
    grid: true,
    grid_num: 10
});
One more example with limits:

Disable the slider

$("#range_36").ionRangeSlider({
    min: 0,
    max: 100,
    from: 30,
    disable: true
});
You can lock your slider, by using disable option:

Keyboard controls

$("#range_37").ionRangeSlider({
    type: "double",
    min: 0,
    max: 100,
    from: 30,
    to: 70,
    keyboard: true
});
After first focus, you can control slider by keyboard (arrow keys and WSAD):
$("#range_38").ionRangeSlider({
    type: "double",
    min: 0,
    max: 100,
    from: 30,
    to: 70,
    keyboard: true,
    keyboard_step: 20
});
Also you can set up keyboard step (in percents):

Working with dates and time, using moment.js

$("#range_39").ionRangeSlider({
    min: +moment().subtract(1, "years").format("X"),
    max: +moment().format("X"),
    from: +moment().subtract(6, "months").format("X"),
    prettify: function (num) {
        return moment(num, "X").format("LL");
    }
});
You can use native Date object if you wish, but moment.js is better!
$("#range_40").ionRangeSlider({
    min: +moment().subtract(12, "hours").format("X"),
    max: +moment().format("X"),
    from: +moment().subtract(6, "hours").format("X"),
    prettify: function (num) {
        return moment(num, "X").format("MMM Do, hh:mm A");
    }
});
Example with 12 hours time format
$("#range_41").ionRangeSlider({
    min: +moment().subtract(12, "hours").format("X"),
    max: +moment().format("X"),
    from: +moment().subtract(6, "hours").format("X"),
    grid: true,
    force_edges: true,
    prettify: function (num) {
        var m = moment(num, "X").locale("ru");
        return m.format("Do MMMM, HH:mm");
    }
});
Example with 24 hours time format and localisation to russian:
$("#range_42").ionRangeSlider({
    min: +moment().subtract(12, "hours").format("X"),
    max: +moment().format("X"),
    from: +moment().subtract(6, "hours").format("X"),
    grid: true,
    force_edges: true,
    prettify: function (num) {
        var m = moment(num, "X").locale("ja");
        return m.format("Do MMMM, LT");
    }
});
One more example, with localisation to japanese:

Manipulating interval

$("#range_119").ionRangeSlider({
    type: "double",
    min: 0,
    max: 100,
    from: 30,
    to: 70,
    min_interval: 20
});
Set minimum interval size:
$("#range_120").ionRangeSlider({
    type: "double",
    min: 0,
    max: 100,
    from: 30,
    to: 70,
    max_interval: 50
});
Set maximum interval size:
$("#range_121").ionRangeSlider({
    type: "double",
    min: 0,
    max: 100,
    from: 30,
    to: 70,
    drag_interval: true
});
Dragging interval:
Fork me on GitHub