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

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 // true by default
});
After first focus, you can control slider by keyboard (arrow keys and WSAD):
$("#range_38").ionRangeSlider({
    type: "single",
    min: 0,
    max: 1000,
    from: 100,
    step: 100
});
Also you can use TAB to navigate to slider. Try to set focus to this input and then press tab. Slider will be focused, you can try keyboard now:

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