Sliders

Usage and anatomy

Slider lets users select one or more numeric values along a range. The component creates its track, filled range, and one thumb for every entry in value or defaultValue.

import { Slider } from "@acme/ui/slider"

<Slider
  aria-label="Volume"
  defaultValue={[40]}
  min={0}
  max={100}
  step={1}
/>

Give a single-value slider an accessible name with aria-label or aria-labelledby, and include a visible label whenever possible. Use a two-value array to create a range selector with two thumbs.

API reference

Slider

Slider also accepts Radix Slider root props such as onValueChange and onValueCommit. SliderTrack and SliderThumb are exported for lower-level composition.