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