Slider

A range slider for selecting a numeric value within a range. Built on the @base-ui/react Slider primitive with a track, progress indicator, and draggable thumb. Supports single value and range (two-thumb) modes.

Anatomy

A <Slider> renders a control/track/indicator/thumb hierarchy. The track is the full-width background, the indicator shows the selected range, and the thumb is the draggable handle. Multiple thumbs enable range selection.

data-slot="slider"track + indicator + thumb

Variations

Single value

One thumb, selecting a single point

Range (two thumbs)

Two thumbs defining a range

With steps

step=10, snaps to increments

Custom range

min=0, max=1000, step=50

States

Default

Disabled

Design Guidelines

Do

  • Show the current value. Display the selected value next to or above the slider for clarity.
  • Use appropriate step sizes. Match the step to the precision needed (1 for age, 10 for volume, etc.).
  • Use range mode for intervals. Price ranges, time windows, and min/max filters benefit from two-thumb mode.

Don't

  • Don't use for precise values. If exact numbers matter, pair the slider with a number input.
  • Don't hide the range. Users need to see min and max to understand the scale.
  • Don't use for very large ranges. A slider from 0 to 10000 makes fine control difficult.

Developer Reference

Accessibility

  • Built on Base UI Slider — manages role="slider", aria-valuemin/max/now.
  • Arrow keys adjust value by step. Page Up/Down for larger jumps. Home/End for min/max.
  • Focus ring on thumb uses focus-visible with ring-4 styling.
  • Thumb size: 4x4 with border, shadow, and hover/active ring states.
  • Track height: 2px (h-0.5), progress indicator fills from left to thumb position.

Usage

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

// Single value
<Slider defaultValue={[50]} max={100} step={1} />

// Range slider (two thumbs)
<Slider defaultValue={[25, 75]} max={100} step={1} />

// Custom range and step
<Slider defaultValue={[200]} min={0} max={1000} step={50} />

// Disabled
<Slider defaultValue={[50]} disabled />

// Controlled
const [value, setValue] = useState([50])
<Slider value={value} onValueChange={setValue} max={100} step={1} />