mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-12 07:09:55 +08:00
8c3090938f
* docs: update docs * docs: update demo
4.8 KiB
4.8 KiB
category | group | title | description | cover | coverDark | demo | ||
---|---|---|---|---|---|---|---|---|
Components | Data Entry | Slider | A Slider component for displaying current value and intervals in range. | https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*_4heQaUrFn4AAAAAAAAAAAAADrJ8AQ/original | https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*XkgXTaudeosAAAAAAAAAAAAADrJ8AQ/original |
|
When To Use
To input a value in a range.
Examples
Basic
Slider with InputNumber
Slider with icon
Customize tooltip
Event
Graduated slider
Vertical
Control visible of ToolTip
Reverse
Draggable track
Multiple handles
Dynamic edit nodes
Component Token
API
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 | - |
range
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 |
tooltip
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 |
Methods
Name | Description | Version |
---|---|---|
blur() | Remove focus | |
focus() | Get focus |