# Sliders
Sliders in Pages are powered by [noUiSlider](http://refreshless.com/nouislider/) and [Ion.RangeSlider](http://ionden.com/a/plugins/ion.rangeSlider/en.html), which are lightweight jQuery Range Slider plugins that come with tons of options and support for multiple devices.
## **noUiSlider**
Follow these steps to include noUiSlider in your page
**Step one**
Include stylesheet `jquery.nouislider.css` inside the ``
```markup
```
**Step two**
Include the relevant javascript files inside the `` before core template script inclusions
```markup
```
### **Color options**
Slider color can be changed by appending the pre-defined classes. Please refer to [Color guide](http://pages.revox.io/dashboard/3.0.0/docs/partials/sliders.html) for all the color options
```markup
```
## **Ion.RangeSlider**
Follow these steps to include Ion.RangeSlider in your page
**Step one**
Include the necessary stylesheet files inside the ``
```markup
```
**Step two**
Include the relevant javascript files inside the `` before core template script inclusions
```markup
```
**Step three**
Apply the plugin to your desired element
```markup
```
### **Color options**
Slider color can be changed by appending the pre-defined classes.
```markup