tabler.tabler/core/docs/ui/components/range-slider.mdx

---
title: Range slider
libs: nouislider
description: Adjust values with range sliders.
summary: Range sliders allow users to select a range of values by adjusting two handles along a track, providing an intuitive and space-efficient input method.
---

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/).