A Slider component for displaying current value and intervals in range.
To input a value in a range.
Common props ref：Common props
| Property | Description | Type | Default | Version |
|---|---|---|---|---|
| autoAdjustOverflow | Whether to automatically adjust the popup position | boolean | true | 5.8.0 |
| 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 intractable | boolean | false | |
| keyboard | Support using keyboard to move handlers | boolean | true | 5.2.0+ |
| 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: ReactNode } | { number: { style: CSSProperties, label: 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 | |
| tooltip | The tooltip relate props | tooltip | - | 4.23.0 |
| 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 | - | |
| trackStyle | The style of slider track (the active range) | CSSProperties | - | |
| railStyle | The style of slider rail (the background) | CSSProperties | - | |
| handleStyle | The style of slider handle | CSSProperties | - |
| Property | Description | Type | Default | Version |
|---|---|---|---|---|
| draggableTrack | Whether range track can be drag | boolean | false | 4.10.0 |
| Property | Description | Type | Default | Version |
|---|---|---|---|---|
| open | If true, Tooltip will show always, or it will not show anyway, even if dragging or hovering | boolean | - | 4.23.0 |
| placement | Set Tooltip display position. Ref Tooltip | string | - | 4.23.0 |
| getPopupContainer | The DOM container of the Tooltip, the default behavior is to create a div element in body | (triggerNode) => HTMLElement | () => document.body | 4.23.0 |
| formatter | Slider will pass its value to formatter, and display its value in Tooltip, and hide Tooltip when return value is null | value => ReactNode | null | IDENTITY | 4.23.0 |
| Name | Description | Version |
|---|---|---|
| blur() | Remove focus | |
| focus() | Get focus |
| Token Name | Description | Type | Default Value |
|---|---|---|---|
| controlSize | Height of slider | number | 10 |
| dotActiveBorderColor | string | #91caff | |
| dotBorderColor | string | #f0f0f0 | |
| dotSize | Size of dot | number | 8 |
| handleActiveColor | string | #1677ff | |
| handleColor | string | #91caff | |
| handleLineWidth | Border width of handle | number | 2 |
| handleLineWidthHover | Border width of handle when hover | number | 4 |
| handleSize | Size of handle | number | 10 |
| handleSizeHover | Size of handle when hover | number | 12 |
| railBg | string | rgba(0, 0, 0, 0.04) | |
| railHoverBg | string | rgba(0, 0, 0, 0.06) | |
| railSize | Height of rail | number | 4 |
| trackBg | string | #91caff | |
| trackBgDisabled | string | rgba(0, 0, 0, 0.04) | |
| trackHoverBg | string | #69b1ff |
Basic slider. When range is true, display as dual thumb mode. When disable is true, the slider will not be interactable.
You can add an icon beside the slider to make it meaningful.
The onChange callback function will fire when the user changes the slider's value. The onAfterChange callback function will fire when onmouseup fired.
The vertical Slider.
Using reverse to render slider reversely.
Synchronize with InputNumber component.
Use tooltip.formatter to format content of Tooltip. If tooltip.formatter is null, hide it.
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.
When tooltip.open is true, ToolTip will always show, or ToolTip will not show anyway, even if dragging or hovering.
Make range track draggable when set range.draggableTrack.
