Slider

Display the current value and an inputable range.

General

Accept clicks or drag actions.

Type

Differentiate states by color.

Disabled

Do not respond to drag and click.

Step

Different granularity.

Range

Specifies the maximum or minimum value of the Slider.

Event

Get event when slide.

APIs

Slider.Props

AttributeDescriptionTypeAccepted valuesDefault
initialValueinitial valuenumber-0
valueslider valuenumber-0
typecurrent typeSliderTypesSliderTypesdefault
stepthe granularity the slider can step through valuesnumber-1
maxthe maximum value of slidernumber-100
minthe minimum value of slidernumber-0
disableddisable slider interactionbooleanfalse
showMarkersshow each markerboolean-false
hideValuehide slider valueboolean-false
onChangecalled when the value of silder changes(val: number) => void--
...native propsHTMLAttributes'id', 'name', 'className', ...-

SliderTypes

type SliderTypes = 'default' | 'secondary' | 'success' | 'warning' | 'error'