Slider
Allow users to make selections from a range of values.
Example
Usage
Basic
Disabled
Custom range
Custom step
Guidelines
When to use
- When setting a numerical value within a fixed range.
When not to use
- Don't use this if the value is unbounded.
Props
Inherits margin props.
| Name | Default | Description |
|---|---|---|
isDisabled | false | booleanDetermines if the slider is disabled. |
aria-label | — | stringLabel that describes the purpose of this slider for screen readers. |
value | — | numberThe value of the slider in controlled mode. |
min | 0 | numberMinimum allowed value. |
max | 100 | numberMaximum allowed value. |
step | — | 1The step in which increments/decrements have to be made. |
onChange | — | (value: number) => voidFunction called whenever the slider value changes (by dragging or clicking). |