Slider
Installation
Add the component with the CLI.
npx shadcn@latest add @intentui/slider
Manual installation
Install the dependencies, then copy the component source into your project.
npm install react-aria-components cn
Examples
Step
Set a step value on the slider, and it will increment or decrement by that fixed amount each time you adjust it.
Range
By passing an array to the defaultValue or value props, you can create a range slider.
Orientation
You can change the orientation of the slider to vertical.
Suffix and prefix
Add prefix or suffix content, such as a volume icon.
Description
Add a description to the slider.
Controlled
You can control the slider's value by using the value prop.
Disabled
When the slider is disabled, it appears grayed out and becomes non-interactive.
Component API
Slider
Slider extends the React Aria Components <Slider> component.
classNamestringSliderFill
SliderFill extends the React Aria Components <SliderFill> component.
classNamestringSliderGroup
SliderGroup extends the native <div> element.
classNamestringSliderOutput
SliderOutput extends the React Aria Components <SliderOutput> component.
classNamestringSliderThumb
SliderThumb extends the React Aria Components <SliderThumb> component.
classNamestringSliderTrack
SliderTrack extends the React Aria Components <SliderTrack> component.
classNamestringSee the React Aria for the full API reference.
