---
title: Range slider
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 example centered vendors libs="nouislider" columns={1}
<div id="range-simple"></div>

<script>
document.addEventListener("DOMContentLoaded", function () {
   window.noUiSlider && (noUiSlider.create(document.getElementById('range-simple'), {
      start: 20,
      connect: [true, false],
      step: 10,
      range: {
         min: 0,
         max: 100
      }
   }));
});
</script>
```

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