Homecomponentsinput

Slider

A numeric input aid with minimum and maximum bounds.

Use Slider to let the user select a value from within a given range.

Two thumbs

Use a tuple of numbers for value to have a slider with two thumbs.

Disabled

Use disabled property to make the slider not interactive.

Step Interval

Use step property specify the interval of increments or decrements.

Minimum Steps Between Thumbs

Use minStepsBetweenThumbs to specify minimum allowed step between the thumbs.

API

name
Required
The name of HTML range input element.
string
value
Required
The controlled value of the slider. Must be used in conjunction with onChange.
SliderValueType
disabled
When true, prevents the user from interacting with the slider.
true
false
min
The minimum value for the slider.
number
max
The maximum value for the slider.
number
step
The stepping interval.
number
minStepsBetweenThumbs
The minimum permitted steps between multiple thumbs.
number
onChange
Event handler called when the value changes.
((value: T) => void)
onBlur
Action to perform when the field is blurred.
FocusEventHandler<HTMLDivElement>
data
An object with the data keys and values.
DataAttributeMap
Table of Contents
Two thumbs
Disabled
Step Interval
Minimum Steps Between Thumbs
API