Skip to content
Nexus Application Design nadesign

Slider

<Slider> is a continuous-value input — drag the thumb along a track. Use when the position in a range carries meaning (a volume, a threshold, a temperature). For exact numeric entry, prefer <Input type="number"> or the planned <NumberInput>.

import from "@na/ui/components/slider" ▶ Open in Storybook packages/ui/src/components/slider.tsx

When to use

  • Audio / speed / opacity sliders.
  • Threshold settings where the user benefits from feeling the range.
  • Date / number range filters.

Don’t use Slider for: precise integer entry (use a number input), unbounded numbers, or values where every increment is equally meaningful and there’s no relative-position story.

Single thumb

<Label>Volume</Label>
<Slider defaultValue={[60]} max={100} step={1} aria-label="Volume" />

Range (two thumbs)

<Slider defaultValue={[20, 80]} max={100} aria-label="Price range" />

With value label and aria-valuetext

When the raw number lacks meaning, pair the label with formatted text and set aria-valuetext so screen readers announce the same.

Speed1.20×
<Slider
  defaultValue={[120]}
  min={50}
  max={200}
  step={10}
  aria-label="Speed"
  aria-valuetext="1.20× speed"
/>

API

Prop Type Default Description
value number[] — Controlled value(s). One element = single thumb; two elements = range.
defaultValue number[] — Initial value for uncontrolled mode.
onValueChange (value: number[]) => void — Fires on every change.
min number 0 Range minimum.
max number 100 Range maximum.
step number 1 Increment.
orientation "horizontal" | "vertical" "horizontal" Vertical needs a parent with min-height.
aria-label string — Required for single-thumb sliders without a visible label.
aria-valuetext string | string[] — Human-readable form of the value (e.g., "1.20× speed"). Per-thumb when an array.
disabled boolean false Native disabled.

Design guidelines

✓ Do

  • Pair with a numeric label so the user can see the exact value as they drag.
  • Set aria-valuetext when the raw number is meaningless ("1.20× speed", "-3 semitones").
  • Use a sensible step. step=1 on a 0–100 range is fine; step=0.01 is finger-pixel-impossible.

✗ Don't

  • Use Slider for unbounded numbers. The track has a max — that is the contract.
  • Use Slider for precise data entry. Drag-to-set is fuzzy; type-to-set is exact.
  • Hide the value entirely. Either show a label or guarantee aria-valuetext narrates it well.

Accessibility

  • Composes Radix Slider — role="slider" on each thumb, with aria-valuemin, aria-valuemax, aria-valuenow.
  • Keyboard: ←/→ step, Home/End jump to bounds, PageUp/PageDown larger steps.
  • For semantic value reading (e.g., “1.20× speed”), pass aria-valuetext — pass an array for range sliders to label each thumb separately.
  • Single-thumb sliders without a visible label require aria-label.

▶ Open Slider stories in Storybook