tabler/docs/components/range-slider.mdx

---
title: Range slider
---

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 libs="nouislider" vendors
<div class="form-range" id="range-color"></div>

<script>
document.addEventListener("DOMContentLoaded", function () {
	window.noUiSlider && (noUiSlider.create(document.getElementById('range-color'), {
		start: 40,
		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/).