Signed in with a different device.
YesterdayYour billing information is not active.
YesterdayYour subscription has expired.
TodayYour storage space is running low
TodayEasy 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"
});