Range
A range lets users choose an approximate value on a slider.
Install
One package and one stylesheet. The stylesheet carries the tokens every component reads.
pnpm add @wolf-rayet/reactimport '@wolf-rayet/react/css/wolf-rayet.css';
import { Range } from '@wolf-rayet/react';Props
A required prop is marked with an asterisk.
| Prop | Type | Default | Description |
|---|---|---|---|
| isDisabled | boolean | — | Use only when the reader can see why. |
Anything else you pass is forwarded to the underlying input, so the standard attributes and event handlers work as they normally would.
Accessibility
What the component does for you, and what it needs from you.
- It is a native range input, so it reports its minimum, maximum and current value, and the arrow keys move it.
- Steps make a keyboard usable. Without them each press moves by one, which is hopeless over a wide range.
- The value must be visible in text as well, because the handle position is not a number.
- The fill on the left of the handle renders on Firefox only. WebKit has no progress pseudo-element, so the track there is plain.