Range Slider

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

help

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: "+"
});
                                                    
                                                

Whant to show that max number is not the biggest one?

                                                    
<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
});