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

Simple start and customising basic params

$("#range_01").ionRangeSlider();
Start without params
$("#range_02").ionRangeSlider({
    min: 100,
    max: 1000,
    from: 550
});
Set min value, max value and start point
$("#range_03").ionRangeSlider({
    type: "double",
    grid: true,
    min: 0,
    max: 1000,
    from: 200,
    to: 800,
    prefix: "$"
});
Set type to double and specify range, also showing grid and adding prefix "$"

Set up range and step

$("#range_04").ionRangeSlider({
    type: "double",
    grid: true,
    min: -1000,
    max: 1000,
    from: -500,
    to: 500
});
Set up range with negative values
$("#range_05").ionRangeSlider({
    type: "double",
    grid: true,
    min: -1000,
    max: 1000,
    from: -500,
    to: 500,
    step: 250
});
Using step 250
$("#range_05").ionRangeSlider({
    type: "double",
    grid: true,
    min: -12.8,
    max: 12.8,
    from: -3.2,
    to: 3.2,
    step: 0.1
});
Set up range with fractional values, using fractional step

Using custom values array

$("#range_07").ionRangeSlider({
    type: "double",
    grid: true,
    from: 1,
    to: 5,
    values: [0, 10, 100, 1000, 10000, 100000, 1000000]
});
Set up you own numbers
$("#range_08").ionRangeSlider({
    grid: true,
    from: 5,
    values: [
        "zero", "one",
        "two", "three",
        "four", "five",
        "six", "seven",
        "eight", "nine",
        "ten"
    ]
});
Using any strings as your values
$("#range_09").ionRangeSlider({
    grid: true,
    from: 3,
    values: [
        "January", "February", "March",
        "April", "May", "June",
        "July", "August", "September",
        "October", "November", "December"
    ]
});
One more example with strings

Prettify visual look of numbers

$("#range_10").ionRangeSlider({
    grid: true,
    min: 1000,
    max: 1000000,
    from: 100000,
    step: 1000,
    prettify_enabled: false
});
No prettify. Big numbers are ugly and unreadable
$("#range_11").ionRangeSlider({
    grid: true,
    min: 1000,
    max: 1000000,
    from: 200000,
    step: 1000,
    prettify_enabled: true
});
Prettify enabled. Much better!
$("#range_12").ionRangeSlider({
    grid: true,
    min: 1000,
    max: 1000000,
    from: 300000,
    step: 1000,
    prettify_enabled: true,
    prettify_separator: "."
});
Don't like space as separator? Use anything you like!
$("#range_13").ionRangeSlider({
    grid: true,
    min: 1000,
    max: 1000000,
    from: 400000,
    step: 1000,
    prettify_enabled: true,
    prettify: function (num) {
        return (Math.random() * num).toFixed(0);
    }
});
You don't like default prettify function? Use your own!

Decorating numbers

$("#range_14").ionRangeSlider({
    type: "double",
    grid: true,
    min: 0,
    max: 10000,
    from: 1000,
    step: 9000,
    prefix: "$"
});
Using prefixes
$("#range_15").ionRangeSlider({
    type: "single",
    grid: true,
    min: -90,
    max: 90,
    from: 0,
    postfix: "°"
});
Using postfixes
$("#range_16").ionRangeSlider({
    grid: true,
    min: 18,
    max: 70,
    from: 30,
    prefix: "Age ",
    max_postfix: "+"
});
Whant to show that max number is not the biggest one?
$("#range_17").ionRangeSlider({
    type: "double",
    min: 100,
    max: 200,
    from: 145,
    to: 155,
    prefix: "Weight: ",
    postfix: " million pounds",
    decorate_both: true
});
Taking care about how from and to values connect? Use decorate_both option:
$("#range_18").ionRangeSlider({
    type: "double",
    min: 100,
    max: 200,
    from: 145,
    to: 155,
    prefix: "Weight: ",
    postfix: " million pounds",
    decorate_both: false
});
Remove double decoration
$("#range_19").ionRangeSlider({
    type: "double",
    min: 100,
    max: 200,
    from: 148,
    to: 152,
    prefix: "Weight: ",
    postfix: " million pounds",
    values_separator: " → "
});
Use your own separator symbol with values_separator option. Like →
$("#range_20").ionRangeSlider({
    type: "double",
    min: 100,
    max: 200,
    from: 148,
    to: 152,
    prefix: "Range: ",
    postfix: " light years",
    decorate_both: false,
    values_separator: " to "
});
Or " to ":

Visual details

$("#range_21").ionRangeSlider({
    type: "double",
    min: 1000,
    max: 2000,
    from: 1200,
    to: 1800,
    hide_min_max: true,
    hide_from_to: true,
    grid: false
});
You can disable all the sliders visual details, if you wish. Like this:
$("#range_22").ionRangeSlider({
    type: "double",
    min: 1000,
    max: 2000,
    from: 1200,
    to: 1800,
    hide_min_max: true,
    hide_from_to: true,
    grid: true
});
Or hide any part you wish
$("#range_23").ionRangeSlider({
    type: "double",
    min: 1000,
    max: 2000,
    from: 1200,
    to: 1800,
    hide_min_max: false,
    hide_from_to: true,
    grid: false
});
And some more
$("#range_24").ionRangeSlider({
    type: "double",
    min: 1000,
    max: 2000,
    from: 1200,
    to: 1800,
    hide_min_max: true,
    hide_from_to: false,
    grid: false
});
And some more
Fork me on GitHub