Search
Slider
A Slider component for displaying current value and intervals in range.
When to use
To input a value in a range.
Basic
Basic slider. When range is true, display as dual thumb mode. When disable is true, the slider will not be interactable.
Disabled:
Slider with InputNumber
Synchronize with InputNumber component.
Customize tooltip
Use tipFormatter to format content of Tooltip. If tipFormatter is null, hide it.
Slider with icon
You can add an icon beside the slider to make it meaningful.
Event
The onChange callback function will fire when the user changes the slider's value. The onAfterChange callback function will fire when onmouseup fired.
Graduated slider
Using marks property to mark a graduated slider, use value or defaultValue to specify the position of thumb. When included is false, means that different thumbs are coordinative. when step is null, users can only slide the thumbs onto marks.
included=true
included=false
marks & step
step=null
Vertical
The vertical Slider.
Reverse
Using reverse to render slider reversely.
Reversed:
Control visible of ToolTip
When tooltipVisible is true, ToolTip will show always, or ToolTip will not show anyway, even if dragging or hovering.
API
| Property | Description | Type | Default |
|---|---|---|---|
autoFocus | Whether get focus when component mounted | boolean | false |
defaultValue | The default value of slider. When range is false, use number, otherwise, use [number, number] | number | [number, number] | 0 | [0, 0] |
disabled | If true, the slider will not be interactable | boolean | false |
dots | Whether the thumb can drag over tick only | boolean | false |
included | Make effect when marks not null, true means containment and false means coordinative | boolean | true |
marks | Tick mark of Slider, type of key must be number, and must in closed interval [min, max], each mark can declare its own style | object | { number: string | ReactNode } | { number: { style: object, label: string | ReactNode } } |
max | The maximum value the slider can slide to | number | 100 |
min | The minimum value the slider can slide to | number | 0 |
range | Dual thumb mode | boolean | false |
reverse | Reverse the component | boolean | false |
step | The granularity the slider can step through values. Must greater than 0, and be divided by (max - min) . When marks no null, step can be null | number | null | 1 |
tipFormatter | Slider will pass its value to tipFormatter, and display its value in Tooltip, and hide Tooltip when return value is null | value => ReactNode | null | IDENTITY |
value | The value of slider. When range is false, use number, otherwise, use [number, number] | number | [number, number] | - |
vertical | If true, the slider will be vertical | boolean | false |
onAfterChange | Fire when onmouseup is fired | (value) => void | - |
onChange | Callback function that is fired when the user changes the slider`s value | (value) => void | - |
tooltipPlacement | Set Tooltip display position. Ref Tooltip | string | - |
tooltipVisible | If true, Tooltip will show always, or it will not show anyway, even if dragging or hovering | boolean | - |
getTooltipPopupContainer | The DOM container of the Tooltip, the default behavior is to create a div element in body | (triggerNode) => HTMLElement | () => document.body |
Methods
| Name | Description | Version |
|---|---|---|
blur() | Remove focus | |
focus() | Get focus |