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
min
number
0
max
number
100
step
number
onInput
function
defaultValue
number
0
showValues
boolean
iconMin
enum
iconMax
enum
dimension
enum
regular
label
string
disabled
boolean
Accessibility
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 |