Slider
An input where the user selects a value from within a given range.
Overview
Use Slider when users choose a value from a range.
Sliders are useful for volume, opacity, price range, thresholds, percentages, and settings where approximate adjustment is faster than typing.
Anatomy
A slider has a track, range, thumb, value, minimum, maximum, step, and optional label. Range sliders have more than one thumb.
Behavior
Use a number field when exact numeric input is more important than quick adjustment. Use a slider when users benefit from seeing the range visually.
Accessibility
Provide a label and visible value when the number matters. Keep keyboard controls working for each thumb.
Installation
npx love-ui@latest add sliderUsage
import { Slider, SliderValue } from "@/components/ui/slider"<Slider />Examples
The examples show labeled values, range selection, vertical orientation, and form integration.
For accessible labelling and validation, prefer using the Field component to wrap checkboxes. See the related example: Slider field.