'/%3e%3cg%20transform='translate(170%20205)%20scale(0.3606)'%20fill='%23111011'%3e%3cpath%20d='M497%20640H359L248%20320%20122%20640H0L256%200z'/%3e%3cpath%20d='M292.43%20640H200.8L248%20522z'/%3e%3cpath%20d='M335%200h138l111%20320L710%200h122L576%20640z'/%3e%3c/g%3e%3c/svg%3e){kind=small}
Forms
Slider
Pick a value or a range by dragging, with the value shown and formatted.
Ant Design: Slider
import { Slider } from '@alea/ui';
Examples
Slider
One value, shown and formatted.
Range
An array value gives two thumbs; name each one.
Props
Slider props
Pick a value, or a range when value is an array (two thumbs). Arrows, Page Up/Down, Home and End work.
| Prop | Type | Default | Description |
|---|---|---|---|
label | ReactNode | - | The visible label. |
showValue | boolean | true | Show the current value next to the label. Default true. |
thumbLabels | string[] | - | Labels for each thumb in a range ("Minimum", "Maximum"). |
Accessibility
- Each thumb is a slider with its own label in a range.
Keyboard
| Key | Does |
|---|---|
| Arrow keys | Step |
| Page Up / Down | Bigger steps |
| Home / End | Min / max |
Do and don't
Do
- Show the value.
- Use formatOptions for units.
Don't
- Don't use when an exact number matters: add a NumberField.