Slider

Powered by

Base UIShadcn UI

Installation

Range

Vertical orientation

Disabled

Live value label

Custom step increments

Formatted value

Drag bubble

Custom min, max, and step

When to use

Sliders allow users to select a value from a range. Use this decision tree:

Usage

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

<Slider defaultValue={[33]} max={100} step={1} />

Props

Keyboard interactions

Accessibility

• Each thumb exposes role="slider" with aria-valuemin, aria-valuemax, and aria-valuenow. Always provide a programmatic label (<Label> + aria-labelledby, or aria-label) describing what the value represents.
• Pair the slider with a visible numeric value where precision matters — sliders alone are hard to read for screen-reader and low-vision users.
• onValueChange receives number[] (always an array, even for single-thumb sliders) — unwrap with value[0] when you only need a scalar.
• Range sliders enforce minValue[i] <= value[i] <= value[i+1] <= maxValue automatically; you don't need to clamp in user land.

Credits

• We use Base UI for the slider component.
• We take our inspiration from Shadcn UI for the slider style.