Slider

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.

A slider has a track, range, thumb, value, minimum, maximum, step, and optional label. Range sliders have more than one thumb.

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.

Provide a label and visible value when the number matters. Keep keyboard controls working for each thumb.

npx honestui@latest add slider

import { Slider, SliderValue } from "@/components/ui/slider"

<Slider />

Our examples cover 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.

With Label and Value

Range Slider

Vertical

Form Integration