Chapter 31: Slider

Core Idea

A range-input control supporting single or multiple thumbs, minimum spacing between thumbs, and click/touch-on-track updates — Radix's answer to <input type="range"> with multi-thumb support native HTML lacks.

Key Concepts

• Anatomy: Root → Track → Range, plus one or more Thumb (rendered directly inside Root, not inside Track).
• Multi-thumb via array value: value/defaultValue are number[] — rendering multiple Thumbs with an array of length N gives an N-thumb range slider.
• minStepsBetweenThumbs: enforces a minimum gap (in steps) between adjacent thumbs, preventing them from crossing or overlapping.
• onValueCommit: fires only when the user finishes dragging/interacting, separate from onValueChange which fires continuously — use onValueCommit for expensive operations (e.g. triggering a network request).
• inverted: flips the visual direction without changing the underlying value semantics.

Code Examples

<Slider.Root
  defaultValue={[25, 75]}
  minStepsBetweenThumbs={1}
  step={1}
  onValueCommit={(value) => saveRange(value)}
>
  <Slider.Track><Slider.Range /></Slider.Track>
  <Slider.Thumb />
  <Slider.Thumb />
</Slider.Root>

• What it demonstrates: a two-thumb range slider with a minimum gap enforced and a commit-only side effect.

Key Takeaways

1. Use onValueChange for live UI updates (e.g. a label showing the dragged value) and onValueCommit for anything expensive or side-effecting — don't fire network requests on every drag frame.
2. For a range (two-handle) slider, just render two Thumbs and pass a 2-element array as the value — no separate "range slider" component exists.
3. minStepsBetweenThumbs is the built-in way to prevent thumb-crossing; don't hand-roll that constraint in onValueChange.

Connects To

• Progress: a related but read-only/non-interactive numeric-value display.