ant-design/components/slider/index.en-US.md
黑雨 4ae0d6bcf5
feat: migrate less to token for Slider (#42428)
*  feat: migrate less to token for Slider

*  feat: update snap

*  feat: update style

*  feat: update style

*  feat: test ci

*  feat: test ci

*  feat: test ci

*  feat: test ci

*  feat: update

*  feat: update snap

*  feat: update

*  feat: update

*  feat: 删除未使用token

*  feat: update doc

*  feat: update dome

*  feat: update

*  feat: test ci

* 📝 doc: update doc

*  feat: update

*  feat: update

*  feat: update

*  feat: update

*  feat: add demo

*  feat: add demo

*  feat: update for reviewer

*  feat: update for reviewer

*  feat: update for reviewer

*  feat: update for reviewer

*  feat: update for reviewer

*  feat: update for reviewer

*  feat: update for reviewer

*  feat: update for reviewer

* Apply suggestions from code review

---------

Co-authored-by: MadCcc <1075746765@qq.com>
2023-06-15 10:22:17 +08:00

4.2 KiB

category group title cover coverDark demo
Components Data Entry Slider https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*_4heQaUrFn4AAAAAAAAAAAAADrJ8AQ/original https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*XkgXTaudeosAAAAAAAAAAAAADrJ8AQ/original
cols
2

A Slider component for displaying current value and intervals in range.

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 Component Token

API

Property Description Type Default Version
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 -

range

Property Description Type Default Version
draggableTrack Whether range track can be drag boolean false 4.10.0

tooltip

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

Methods

Name Description Version
blur() Remove focus
focus() Get focus

Design Token