Numeric
The numeric-value behaviours. Three of them take input along a scale; one reports progress along one.
The pieces
| Component | Captures or reports |
|---|---|
| Slider | One value on a scale — input |
| RangeSlider | A low–high pair — input |
| RatingInput | A discrete count, e.g. stars — input |
| Progress | A completion fraction — output |
Input or output
Slider, RangeSlider, and RatingInput are inputs — the user drags or keys a value, and the
component reports it through onValueChange. Progress is an output — it reflects a value your
code owns, with no interaction at all.
The input three share an ARIA model. Each is a role="slider" with aria-valuenow,
aria-valuemin, and aria-valuemax, and the same keyboard scheme: arrow keys step by step,
Home and End jump to the bounds. RangeSlider applies it twice, one slider per thumb. Progress
is a role="progressbar" instead — it carries a value but takes no keys.
Indeterminate progress
Progress accepts null as its value for the indeterminate state — work is happening but its
extent is unknown. The bar animates without an aria-valuenow, which is the correct ARIA for
"in progress, amount unknown".