Range slider

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