Chapter 40: Slider

Core Idea

A single- or multi-thumb range control — value accepts either a number or an array of numbers, with per-thumb collision handling and alignment options for keeping multiple thumbs usable when they meet.

Key Concepts

• Anatomy: Root → Label, Value, Control → Track → Indicator, Thumb (repeated for multi-thumb).
• Multi-thumb: pass an array to value/defaultValue; render one Thumb per array entry, each needing its own aria-label (or getAriaLabel) since Slider.Label alone can't distinguish individual thumbs (per ch009 Forms' naming guidance).
• thumbAlignment/thumbCollisionBehavior: control how thumbs behave/visually align when multiple thumbs approach or reach the same value — prevents thumbs from becoming unreachable or visually overlapping ambiguously.
• minStepsBetweenValues: minimum step-gap enforced between adjacent thumbs in multi-thumb mode (e.g. preventing a min/max range slider's two thumbs from crossing or touching).
• Stepping: step, largeStep (modifier-key-adjusted increment, same idea as Number Field's smallStep/largeStep).
• onValueCommitted vs onValueChange: same distinction as Number Field — onValueChange fires continuously while dragging, onValueCommitted fires once on release; use committed for expensive side effects.
• data-dragging: present while a thumb is actively being dragged — style the active thumb/track distinctly during interaction.
• Thumb.getAriaValueText/aria-valuetext: custom accessible value announcement, independent of visual format/locale display (same pattern as Meter/Progress).

Reference Tables

Part	Notable props	Notable data attributes
Root	value/defaultValue/onValueChange/onValueCommitted, min/max, step/largeStep, minStepsBetweenValues, thumbAlignment/thumbCollisionBehavior, orientation, format, locale	data-dragging, data-orientation, plus shared field-state attributes
Thumb	index, aria-valuetext, getAriaLabel/getAriaValueText, tabIndex, disabled	data-index, data-dragging, plus shared field-state attributes

Key Takeaways

1. Always give each Thumb in a multi-thumb slider its own aria-label/getAriaLabel (e.g. "Minimum price"/"Maximum price") — a single Slider.Label on Root labels the slider as a whole, not individual thumbs.
2. Set minStepsBetweenValues on any min/max range slider — without it, two thumbs can end up at the same value with no enforced separation, which is usually a UX bug.
3. Use onValueCommitted for anything expensive (API calls, heavy chart re-renders) — dragging fires onValueChange on every pixel of movement.

Connects To

• ch031 (Number Field): shares the step/largeStep and onValueChange/onValueCommitted conventions.
• ch009 (Forms): multi-thumb labeling guidance (aria-label per Slider.Thumb) and Fieldset grouping for range sliders.