forms contract
Slider
Continuous or stepped numeric range — for volume, opacity, price ranges.
Variants
- default
- range
- stepped
Sizes
- sm
- md
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.