settings

Range Slider

bookmark

ion.RangeSlideris Easy, flexible and responsive range slider with skin support.

Basic
Start without params
<input id="range_01"/>
$("#range_01").ionRangeSlider();
Set min value, max value and start point
<input id="range_02"/>
$("#range_02").ionRangeSlider({    min: 100,    max: 1000,    from: 550});
Set type to double and specify range, also showing grid and adding prefix "$"
<input id="range_03"/>
$("#range_03").ionRangeSlider({    type: "double",    grid: true,    min: 0,    max: 1000,    from: 200,    to: 800,    prefix: "$"});
Set up range and step
Set up range with negative values
<input id="range_04"/>
$("#range_04").ionRangeSlider({    type: "double",    grid: true,    min: -1000,    max: 1000,    from: -500,    to: 500});
Using step 250
<input id="range_05"/>
$("#range_05").ionRangeSlider({    type: "double",    grid: true,    min: -1000,    max: 1000,    from: -500,    to: 500,    step: 250});
Set up range with fractional values, using fractional step
<input id="range_06"/>
$("#range_06").ionRangeSlider({    type: "double",    grid: true,    min: -12.8,    max: 12.8,    from: -3.2,    to: 3.2,    step: 0.1});
Using custom values array
Start without params
<input id="range_07"/>
$("#range_07").ionRangeSlider({    type: "double",    grid: true,    from: 1,    to: 5,    values: [0, 10, 100, 1000, 10000, 100000, 1000000]});
Using any strings as your values
<input id="range_08"/>
$("#range_08").ionRangeSlider({    grid: true,    from: 5,    values: [        "zero", "one",        "two", "three",        "four", "five",        "six", "seven",        "eight", "nine",        "ten"    ]});
One more example with strings
<input id="range_09"/>
$("#range_09").ionRangeSlider({    grid: true,    from: 3,    values: [        "January", "February", "March",        "April", "May", "June",        "July", "August", "September",        "October", "November", "December"    ]});
Prettify visual look of numbers
No prettify. Big numbers are ugly and unreadable
<input id="range_10"/>
$("#range_10").ionRangeSlider({    grid: true,    min: 1000,    max: 1000000,    from: 100000,    step: 1000,    prettify_enabled: false});
Prettify enabled. Much better!
<input id="range_11"/>
$("#range_11").ionRangeSlider({    grid: true,    min: 1000,    max: 1000000,    from: 200000,    step: 1000,    prettify_enabled: true});
You don't like default prettify function? Use your own!
<input id="range_13"/>
$("#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);    }});
Decorating numbers
Using prefixes
<input id="range_14"/>
$("#range_14").ionRangeSlider({    type: "double",    grid: true,    min: 0,    max: 1000,    from: 200,    to: 800,    prefix: "$"});
Using postfixes
<input id="range_15"/>
$("#range_15").ionRangeSlider({    type: "single",    grid: true,    min: -90,    max: 90,    from: 0,    postfix: "°"});
Whant to show that max number is not the biggest one?
<input id="range_16"/>
$("#range_16").ionRangeSlider({    grid: true,    min: 18,    max: 70,    from: 30,    prefix: "Age ",    max_postfix: "+"});
Taking care about how from and to values connect? Use decorate_both option:
<input id="range_17"/>
$("#range_17").ionRangeSlider({    type: "double",    min: 100,    max: 200,    from: 145,    to: 155,    prefix: "Weight: ",    postfix: " million pounds",    decorate_both: true});
Visual details
You can disable all the sliders visual details, if you wish. Like this:
<input id="range_21"/>
$("#range_21").ionRangeSlider({    type: "double",    min: 1000,    max: 2000,    from: 1200,    to: 1800,    hide_min_max: true,    hide_from_to: true,    grid: false});
Hide any part you wish
<input id="range_22"/><input id="range_23"/><input id="range_24"/>
$("#range_22").ionRangeSlider({    type: "double",    min: 1000,    max: 2000,    from: 1200,    to: 1800,    hide_min_max: true,    hide_from_to: true,    grid: true});$("#range_23").ionRangeSlider({    type: "double",    min: 1000,    max: 2000,    from: 1200,    to: 1800,    hide_min_max: false,    hide_from_to: true,    grid: false});$("#range_24").ionRangeSlider({    type: "double",    min: 1000,    max: 2000,    from: 1200,    to: 1800,    hide_min_max: true,    hide_from_to: false,    grid: false});