# Range slider

## Introduction

We used  [Ion.RangeSlider](http://ionden.com/a/plugins/ion.rangeSlider/en.html) a third party plugin, its comfortable, responsive and easily customizable range slider with plenty options.

![](https://3450431908-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LQEhO3LIP7yf9jj1Q3z%2F-LRmAQdHPQPKaQsT6jaJ%2F-LRmBzd0llCDD0wSkBLN%2FScreenshot_2018-11-20%20Protype%20I%20Form%20Element\(2\).png?alt=media\&token=74c98199-2acb-4950-8913-6b2a8f687576)

## How to Setup

### **HTML Structure**

```markup
<input class="range-slider" />
```

## Dependency

### JS

```javascript
<!-- 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

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