mirror of
https://github.com/tabler/tabler.git
synced 2025-12-21 17:34:25 +04:00
33 lines
1.0 KiB
Plaintext
33 lines
1.0 KiB
Plaintext
---
|
|
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/).
|