Slider
Slider
A Slider component for displaying current value and intervals in range.
Importimport{ Slider }from"antd"; |
Sourcecomponents/slider |
DocsEdit this page |
- Components Overview
- General
- Layout
- Navigation
- Data Entry
- Data Display
- Feedback
- Other
Importimport{ Slider }from"antd"; |
Sourcecomponents/slider |
DocsEdit this page |
To input a value in a range.
Common props ref：Common props
| Property | Description | Type | Default | Version |
|---|---|---|---|---|
| autoFocus | Whether get focus when component mounted | boolean | false | |
| classNames | Semantic structure className | Record<SemanticDOM, string> | - | 5.10.0 |
| 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 step is null but exist marks, the valid point will only be the mark, min and max | number | null | 1 | |
| styles | Semantic structure style | Record<SemanticDOM, React.CSSProperties> | - | 5.10.0 |
| 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 | |
| onChangeComplete | Fire when mouseup or keyup is fired | (value) => void | - | |
| onChange | Callback function that is fired when the user changes the slider's value | (value) => void | - |
| Property | Description | Type | Default | Version |
|---|---|---|---|---|
| draggableTrack | Whether range track can be drag | boolean | false | - |
| editable | Dynamic edit nodes, can't be used with draggableTrack | boolean | false | 5.20.0 |
| minCount | The minimum count of nodes | number | 0 | 5.20.0 |
| maxCount | The maximum count of nodes | number | - | 5.20.0 |
| Property | Description | Type | Default | Version |
|---|---|---|---|---|
| autoAdjustOverflow | Whether to automatically adjust the popup position | boolean | true | 5.8.0 |
| 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 | Border color of dot when active | string | #91caff |
| dotBorderColor | Border color of dot | string | #f0f0f0 |
| dotSize | Size of dot | number | 8 |
| handleActiveColor | Border color of handle when active | string | #1677ff |
| handleActiveOutlineColor | Outline color of handle when active | string | rgba(22, 119, 255, 0.2) |
| handleColor | Color of handle | string | #91caff |
| handleColorDisabled | Color of handle when disabled | string | #bfbfbf |
| handleLineWidth | Border width of handle | string | number | 2 |
| handleLineWidthHover | Border width of handle when hover | string | number | 2.5 |
| handleSize | Size of handle | number | 10 |
| handleSizeHover | Size of handle when hover | number | 12 |
| railBg | Background color of rail | string | rgba(0, 0, 0, 0.04) |
| railHoverBg | Background color of rail when hover | string | rgba(0, 0, 0, 0.06) |
| railSize | Height of rail | number | 4 |
| trackBg | Background color of track | string | #91caff |
| trackBgDisabled | Background color of track when disabled | string | rgba(0, 0, 0, 0.04) |
| trackHoverBg | Background color of track when hover | 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 onChangeComplete callback function will fire when mouseup or keyup fired.
The vertical Slider.
Using reverse to render slider reversely.
Multiple handles combination.
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, if set to false the ToolTip will not show, even if dragging or hovering.
Make range track draggable by setting range.draggableTrack.
Click to add a node, drag out or press the key to delete the node.
