---
title: Range slider
page-libs: [nouislider]
---

To be able to use the range slider in your application you will need to install the nouislider dependency with `npm install nouislider`.

All options and features can be found [**here**](https://refreshless.com/nouislider/).

## Basic range slider

```html code example centered
<div data-slider='{"js-name": "slider0","start": 50,"range": {"min": 0,"max": 100}}'></div>
<p demo-slider="slider0"></p>
```

That's only the basic features and options of range slider. More possibilities can be found [**here**](https://refreshless.com/nouislider/).
