forms contract
Slider
Continuous or stepped numeric range — for volume, opacity, price ranges.
Variants
- default
- Single thumb
- range
- Two thumbs for min/max selection
- stepped
- Snap-to ticks; visible tick marks
Sizes
- sm
- 20pt thumb, 4pt track
- md
- 24pt thumb, 6pt track (default)
Example
<Slider min={0} max={100} step={5} aria-valuetext={`${value}%`} />Usage rule
role="slider" + aria-valuemin/max/now + aria-valuetext for human-readable values ("$45 of $0–$100").
The full Slider contract has 4 more rules, plus the do-not patterns. Get the full recipe.