mirror of
https://github.com/tabler/tabler.git
synced 2025-12-22 01:44:25 +04:00
31 lines
833 B
Plaintext
31 lines
833 B
Plaintext
---
|
|
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/).
|