Slider
Beta notice: This page is being built.Edit on GitHub(opens in new tab)
Edits a number or range using a standard horizontal slider.
longlink docs component "Slider"
Example
Properties
| Slider - Properties |
|---|
label Label text (always rendered for accessibility).string |
description Description text rendered below the label.string |
name Includes the themed control's value under this form submission name.string |
required Requires a value before native form submission.boolean |
disabled Prevents interaction and excludes the field from submission.boolean |
min Minimum value.number |
max Maximum value.number |
step Step increment.number |
value Current value: a `number` for single thumb mode or `[number, number]` for range mode.(number) | ([number, number]) |
defaultValue Initial value.(number) | ([number, number]) |
onChange Callback fired on value change during drag.((value: number) => void) | ((value: [number, number]) => void) |
onChangeEnd Callback fired when drag ends.((value: number) => void) | ((value: [number, number]) => void) |
minStepsBetweenThumbs Minimum number of steps between thumbs in range mode; prevents thumbs from overlapping.number |