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

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