Easy to use, flexible and responsive range slider with skin support. Demo page.
To use the plugin, you need to add the following files.
<!-- CSS -->
<link rel="stylesheet" href="libs/range-slider/css/ion.rangeSlider.min.css" type="text/css">
<!-- Javascript -->
<script src="libs/range-slider/js/ion.rangeSlider.min.js"></script>
Set min value, max value and start point
<input type="text" id="demo_1">
$("#demo_1").ionRangeSlider({
min: 100,
max: 1000,
from: 550,
skin: "round"
});
$("#demo_2").ionRangeSlider({
type: "double",
grid: true,
min: 0,
max: 1000,
from: 200,
to: 800,
prefix: "$",
skin: "round"
});
$("#demo_3").ionRangeSlider({
type: "double",
grid: true,
min: -1000,
max: 1000,
from: -500,
to: 500,
step: 100
});
$("#demo_4").ionRangeSlider({
type: "double",
grid: true,
min: -12.8,
max: 12.8,
from: -3.2,
to: 3.2,
step: 0.1,
skin: "round"
});
Values array could be anything, even strings
$("#rangeSlider-example").ionRangeSlider({
grid: true,
from: new Date().getMonth(),
values: [
"Jan", "Feb", "Mar", "Apr", "May", "Jun",
"Jul", "Aug", "Sep", "Oct", "Nov", "Dec"
],
skin: "round"
});