Range Slider

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

HTML
JS

                        
<input id="range_01"/>

                        
$("#range_01").ionRangeSlider();

HTML
JS

                        
<input id="range_02"/>

                        
$("#range_02").ionRangeSlider({
    min: 100,
    max: 1000,
    from: 550
});

HTML
JS

                        
<input id="range_03"/>

                        
$("#range_03").ionRangeSlider({
    type: "double",
    grid: true,
    min: 0,
    max: 1000,
    from: 200,
    to: 800,
    prefix: "$"
});

HTML
JS

                        
<input id="range_04"/>

                        
$("#range_04").ionRangeSlider({
    type: "double",
    grid: true,
    min: -1000,
    max: 1000,
    from: -500,
    to: 500
});

HTML
JS

                        
<input id="range_05"/>

                        
$("#range_05").ionRangeSlider({
    type: "double",
    grid: true,
    min: -1000,
    max: 1000,
    from: -500,
    to: 500,
    step: 250
});

HTML
JS

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

HTML
JS

                        
<input id="range_07"/>

                        
$("#range_07").ionRangeSlider({
    type: "double",
    grid: true,
    from: 1,
    to: 5,
    values: [0, 10, 100, 1000, 10000, 100000, 1000000]
});

HTML
JS

                        
<input id="range_08"/>

                        
$("#range_08").ionRangeSlider({
    grid: true,
    from: 5,
    values: [
        "zero", "one",
        "two", "three",
        "four", "five",
        "six", "seven",
        "eight", "nine",
        "ten"
    ]
});

HTML
JS

                        
<input id="range_09"/>

                        
$("#range_09").ionRangeSlider({
    grid: true,
    from: 3,
    values: [
        "January", "February", "March",
        "April", "May", "June",
        "July", "August", "September",
        "October", "November", "December"
    ]
});

HTML
JS

                        
<input id="range_10"/>

                        
$("#range_10").ionRangeSlider({
    grid: true,
    min: 1000,
    max: 1000000,
    from: 100000,
    step: 1000,
    prettify_enabled: false
});

HTML
JS

                        
<input id="range_11"/>

                        
$("#range_11").ionRangeSlider({
    grid: true,
    min: 1000,
    max: 1000000,
    from: 200000,
    step: 1000,
    prettify_enabled: true
});

HTML
JS

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

HTML
JS

                        
<input id="range_14"/>

                        
$("#range_14").ionRangeSlider({
    type: "double",
    grid: true,
    min: 0,
    max: 1000,
    from: 200,
    to: 800,
    prefix: "$"
});

HTML
JS

                        
<input id="range_15"/>

                        
$("#range_15").ionRangeSlider({
    type: "single",
    grid: true,
    min: -90,
    max: 90,
    from: 0,
    postfix: "°"
});

HTML
JS

                        
<input id="range_16"/>

                        
$("#range_16").ionRangeSlider({
    grid: true,
    min: 18,
    max: 70,
    from: 30,
    prefix: "Age ",
    max_postfix: "+"
});

HTML
JS

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

HTML
JS

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

HTML
JS

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

Range Slider

Basic

Start without params

Set min value, max value and start point

Set type to double and specify range, also showing grid and adding prefix "$"

Set up range and step

Set up range with negative values

Using step 250

Set up range with fractional values, using fractional step

Using custom values array

Start without params

Using any strings as your values

One more example with strings

Prettify visual look of numbers

No prettify. Big numbers are ugly and unreadable

Prettify enabled. Much better!

You don't like default prettify function? Use your own!

Decorating numbers

Using prefixes

Using postfixes

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

Taking care about how from and to values connect? Use decorate_both option:

Visual details

You can disable all the sliders visual details, if you wish. Like this:

Or hide any part you wish