RUI.next

Data-Entry
Slider

Slider

Slider is the form slider control.

<Slider defaultValue={20} />
<Slider defaultValue={20} />

Example

Basic usage of Slider component.

Basic Slider (refer `RUI-log` in Console log)
Slider with Ticks and Marks (refer `RUI-log` in Console log)
025%50%75%100%
Slider with disabled status
025%50%75%100%
Slider with double Thumb (refer `RUI-log` in Console log)

API

PropertiesDescriptionTypeDefault
minThe min valuenumber0
maxThe max valuenumber100
stepThe step distance, the value must be greater than 0, and can be divisible by (max-min). When marks is not null, the configuration of step is invalidnumber1
disabledWhether the control is disabledbooleanfalse
valueThe current valuenumber | [number, number]-
rangeWhether the control is a double slidersbooleanfalse
defaultValueThe default valuenumber | [number, number]range ? [0, 0] : 0
onChangeTriggered when the slider is dragged, and the current dragged value is passed in as a parameter(value: number | [number, number]) => void-
onAfterChangeConsistent with the trigger timing of touchend, pass the current value as a parameter(value: number | [number, number]) => void-
iconThe icon of sliderReactNode-
ticksWhether to display the Ticksbooleanfalse
marksThe Marks of Ticks{[key: number]: React.ReactNode}-