Slider
A range input for values where the rough magnitude matters more than the exact number.
Showing the value
Without showValue there's no numeric readout at all, which is the right call when the setting is felt rather than measured.
35
Custom range and step
Controlled
The event carries a string, as all native range inputs do, so wrap it in Number() before storing it.
2500
$2,500 per month
Props
Every other native input attribute is forwarded to the underlying <input type="range">.
| Prop | Type | Default | Description |
|---|---|---|---|
| label | string | Text above the track. | |
| showValue | boolean | false | Shows the current value to the right of the label. |
| min | number | 0 | Lower bound. |
| max | number | 100 | Upper bound. |
| step | number | 1 | Increment between stops. |
| value | number | Controlled value. | |
| defaultValue | number | Uncontrolled initial value. | |
| disabled | boolean | false | Disables the input. |
| onChange | (e: ChangeEvent<HTMLInputElement>) => void | Fires as the thumb moves. The value arrives as a string; cast it. |