inputs
Slider
An input where the user selects a value from within a given range.
Features
- Multiple sizes
- Can be controlled or uncontrolled
- Supports touch or click on track to update value
- Supports Right to Left direction
- Full keyboard navigation
Anatomy
import { Slider } from "@wonderflow/react-components";
export default () => {
return <Slider />;
};Examples
With icons
If you don't want to use numeric values you can use icons instead.
API Reference
PROPERTY
TYPE
DEFAULT
minnumber0maxnumber100stepnumberonInputfunctiondefaultValuenumber0showValuesbooleaniconMinenumiconMaxenumdimensionenumregularlabelstringdisabledbooleanAccessibility
Adheres to the slider role requirements.
Keyboard interactions
| Name | Description |
|---|---|
| ArrowRight | Increments/decrements by the step value depending on orientation |
| ArrowLeft | Increments/decrements by the step value depending on orientation |
| ArrowUp | Increases the value by the step amount |
| ArrowDown | IDecreases the value by the step amount |
| PageUp | Increases the value by a larger step |
| PageDown | Decreases the value by a larger step |
| Home | Sets the value to its minimum |
| End | Sets the value to its maximum |