Ion Range Slider
About Ion Range Slider
Data-Skin Modern

Eample : Set diapason from 0 to 5000, Adding postfix ''+'' to max value, Set slider type to double, Dollar symbol as prefix, Enable grid


Data-Skin Flat

Eample : Set diapason from 0 to 5000, Adding postfix ''+'' to max value, Set slider type to double, Dollar symbol as prefix, Enable grid


Data-Skin Flat

Example: Set diapason from 0 to 10, Set fractional step value: 0.1, Enable grid


Data-Skin Flat

Example: Set diapason from -50 to +50, Set FROM value to 0, Add degree symbol as postfix


Data-Skin Flat

Example:Change common slider numbers to custom (Month names). Using values array for that. Array can be any length, Slider will change min and max number automaticaly to fit values array length, Step parameter also will be changed to one, to allow to choose items in values array


Data-Skin Flat

Skin flat $(".js-range-slider").ionRangeSlider({ skin: "flat" });
Skin big $(".js-range-slider").ionRangeSlider({ skin: "big" });
Skin modern $(".js-range-slider").ionRangeSlider({ skin: "modern" });
Skin sharp $(".js-range-slider").ionRangeSlider({ skin: "sharp" });
Skin round $(".js-range-slider").ionRangeSlider({ skin: "round" });
Skin square $(".js-range-slider").ionRangeSlider({ skin: "square" });

For More Advance Settings Visit ion rangeSlider website.

HTML Usage
                                                
<strong>Data-Skin Modern</strong>
<div id="ionrange_1" data-skin="modern"></div>
<p>Eample : Set diapason from 0 to 5000, Adding postfix ''+'' to max value, Set
    slider
    type to double, Dollar symbol as prefix, Enable grid</p>
<hr>
<strong>Data-Skin Flat</strong>
<div id="ionrange_1_2" data-skin="flat"></div>
<p>Eample : Set diapason from 0 to 5000, Adding postfix ''+'' to max value, Set
    slider
    type to double, Dollar symbol as prefix, Enable grid</p>
<hr>
<strong>Data-Skin Flat</strong>
<div id="ionrange_2"></div>
<p>Example: Set diapason from 0 to 10, Set fractional step value: 0.1, Enable
    grid </p>
<hr>
<strong>Data-Skin Flat</strong>
<div id="ionrange_3"></div>
<p>Example: Set diapason from -50 to +50, Set FROM value to 0, Add degree symbol
    as
    postfix </p>
<hr>
<strong>Data-Skin Flat</strong>
<div id="ionrange_4"></div>
<p>Example:Change common slider numbers to custom (Month names). Using values
    array for
    that. Array can be any length, Slider will change min and max number
    automaticaly to
    fit values array length, Step parameter also will be changed to one, to
    allow to
    choose items in values array</p>
<hr>
<strong>Data-Skin Flat</strong>
<div id="ionrange_5"></div>
<p></p>
                                                
                                            
Javascript Usage
                                                
<!--RangeSlider JS-->
<script src="plugins/ionrangeSlider/js/ion.rangeSlider.js"></script>
<script>
    // Ion Range Siledr 
    $("#ionrange_1").ionRangeSlider({
        min: 0,
        max: 5000,
        type: 'double',
        prefix: "$",
        maxPostfix: "+",
        prettify: false,
        hasGrid: true
    });
    $("#ionrange_1_2").ionRangeSlider({
        min: 0,
        max: 5000,
        type: 'double',
        prefix: "$",
        maxPostfix: "+",
        prettify: false,
        hasGrid: true
    });
    $("#ionrange_2").ionRangeSlider({
        min: 0,
        max: 10,
        type: 'single',
        step: 0.1,
        postfix: " carats",
        prettify: false,
        hasGrid: true
    });
    $("#ionrange_3").ionRangeSlider({
        min: -50,
        max: 50,
        from: 0,
        postfix: "°",
        prettify: false,
        hasGrid: true
    });
    $("#ionrange_4").ionRangeSlider({
        values: [
            "January", "February", "March",
            "April", "May", "June",
            "July", "August", "September",
            "October", "November", "December"
        ],
        type: 'single',
        hasGrid: true
    });
    $("#ionrange_5").ionRangeSlider({
        min: 10000,
        max: 100000,
        step: 100,
        postfix: " km",
        from: 55000,
        hideMinMax: true,
        hideFromTo: false
    });
</script>