Range
A range lets users choose an approximate value on a slider.
Install
One package and one stylesheet. The stylesheet holds the tokens every component uses.
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 | None | Use only when people can see why. |
Any other props are passed to the underlying input, so standard attributes and event handlers work as usual.
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 keyboard use practical. Without them, each key press moves by one, which is too slow over a wide range.
- Show the value as text too. The handle position alone does not give 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.