mirror of
https://github.com/tabler/tabler.git
synced 2026-10-20 23:04:20 +04:00
Paweł Kunaandcopilot-swe-agent[bot]
8962710163
Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
19 lines
950 B
Plaintext
19 lines
950 B
Plaintext
---
|
|
title: Range slider
|
|
docs-libs: nouislider
|
|
description: Adjust values with a range slider.
|
|
summary: A range slider allows users to select a range of values by adjusting two handles along a track, providing an intuitive and space-efficient input method.
|
|
layout: '@layouts/DocsMdxLayout.astro'
|
|
---
|
|
import Example from '@components/Example.astro';
|
|
|
|
To be able to use the range slider in your application you will need to install the noUiSlider dependency with `npm install nouislider`.
|
|
|
|
## Basic range slider
|
|
|
|
<Example>
|
|
<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>
|
|
</Example>
|
|
|
|
For more details on customizing a noUiSlider element, see the documentation on the [noUiSlider website](https://refreshless.com/nouislider/).
|