A JavaScript plugins for selecting range.
A comfortable, responsive and easily customizable range slider with plenty options.
<form action="#">
<div class="form-group">
<label class="form-label">Default slider</label>
<input class="range-slider" />
</div>
<div class="form-group">
<label class="form-label">Set min value, max value and start point</label>
<input class="range-slider-1" />
</div>
<div class="form-group">
<label class="form-label">Set custom step and snap grid to step</label>
<input class="range-slider-2" />
</div>
<div class="form-group">
<label class="form-label">smaller size range</label>
<input class="range-slider" data-extra-classes="irs-sm" />
</div>
</form>
<!-- Ion JS -->
<script src="vendors/ion-rangeslider/js/ion.rangeSlider.min.js"></script>
$(".range-slider").ionRangeSlider({
type: "single",
min: 0,
max: 100,
from: 50,
keyboard: true,
onStart: function (data) {
console.log("onStart");
},
onChange: function (data) {
console.log("onChange");
},
onFinish: function (data) {
console.log("onFinish");
},
onUpdate: function (data) {
console.log("onUpdate");
}
});
$(".range-slider-1").ionRangeSlider({
type: "double",
min: 1000,
max: 5000,
from: 2000,
to: 4000
});
$(".range-slider-2").ionRangeSlider({
type: "double",
min: 0,
max: 10000,
step: 500,
grid: true,
grid_snap: true
});