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

Progress

Properties

Slider - Properties
labelstring
Label text (always rendered for accessibility).
descriptionstring
Description text rendered below the label.
namestring
Includes the themed control's value under this form submission name.
requiredboolean
Requires a value before native form submission.
disabledboolean
Prevents interaction and excludes the field from submission.
minnumber
Minimum value.
maxnumber
Maximum value.
stepnumber
Step increment.
value(number) | ([number, number])
Current value: a `number` for single thumb mode or `[number, number]` for range mode.
defaultValue(number) | ([number, number])
Initial value.
onChange((value: number) => void) | ((value: [number, number]) => void)
Callback fired on value change during drag.
onChangeEnd((value: number) => void) | ((value: [number, number]) => void)
Callback fired when drag ends.
minStepsBetweenThumbsnumber
Minimum number of steps between thumbs in range mode; prevents thumbs from overlapping.