Slider
A Slider component for displaying current value and intervals in range.
When To Use#
To input a value in a range.
Examples#
Basic usage#
30
40
Range usage#
30
70
40
60
Customized min & max usage#
130
240
300
Customized step usage#
20
30
60
Disabled#
30
40
60
API#
| Property | Description | Type | Default |
|---|---|---|---|
value | The value of slider. When range is false, use number, otherwise, use [number, number] | number | [number, number] | |
defaultValue | The default value of slider. When range is false, use number, otherwise, use [number, number] | number | [number, number] | |
min | The minimum value the slider can slide to | number | 0 |
max | The maximum value the slider can slide to | number | 100 |
step | The granularity the slider can step through values. Must greater than 0, and be divided by (max - min) | number | 1 |
range | dual thumb mode | boolean | false |
disabled | If true, the slider will not be interactable. | boolean | false |
onChange | Callback function that is fired when the user changes the slider's value. | (value: number \| [number, number]) => void |