Range slider

Introduction

We used Ion.RangeSlider a third party plugin, its comfortable, responsive and easily customizable range slider with plenty options.

How to Setup

HTML Structure

<input class="range-slider" />

Dependency

JS

<!-- Ion JavaScript -->
<script src="vendors/ion-rangeslider/js/ion.rangeSlider.min.js"></script>
<script src="dist/js/rangeslider-data.js"></script>

Initialize Range slider js

$(".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");
}
});