ComponentsCore
Slider
A slider allows a user to select one or more values within a range.
Example
Output
Usage
Features
The <input type="range"> HTML element can be used to build a slider, however it is very difficult to style cross browser. Slider helps achieve accessible sliders that can be styled as needed.
- Customizable – Support for one or multiple thumbs, in both horizontal and vertical orientations. The whole slider, or individual thumbs can be disabled. Custom minimum, maximum, and step values are supported as well.
- High quality interactions – Mouse, touch, and keyboard input is supported via the useMove hook. Pressing the track moves the nearest thumb to that position. Text selection and touch scrolling are prevented while dragging.
- Touch friendly – Multiple thumbs or sliders can be dragged at once on multi-touch screens.
- Accessible – Slider thumbs use visually hidden
<input>elements for mobile screen reader support, and HTML form integration.<label>and<output>elements are automatically associated to provide context for assistive technologies. - International – Output value is formatted as a percentage or custom format according to the user's locale. The slider automatically mirrors all interactions in right-to-left languages.
Installation
Required Component
This component depends on Field and Tooltip. Make sure you have installed and configured it before using this component.Install following dependencies:
npm install react-aria-components tw-animate-css tailwindcss-react-aria-components class-variance-authority lucide-react clsx tailwind-merge motionAdd cn helper using clsx and twMerge for conditional class merging in Tailwind components.
TypeScript
JavaScript
Add composeTailwindRenderProps helper using cn and composeRenderProps from react-aria-components for conditional class rendering.
TypeScript
JavaScript
Copy and paste the following code into your project.
TypeScript
JavaScript
npx @libravelui@latest add sliderAnatomy
import { Slider } from "@/components/ui/core/slider";<Slider />Another Example
Range
The range slider allows users to select a value range instead of a single value. This is useful for filtering data or setting minimum and maximum thresholds.
Props
Loading types…