> For the complete documentation index, see [llms.txt](https://docs.pages.revox.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.pages.revox.io/ui-elements/sliders.md).
# 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