Ion Range Slider
About Ion Range SliderEample : 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>