Importimport { Slider } from 'antd'; |
Used to input a value within a specified range.
Common props ref：Common props
| Property | Description | Type | Default | Version | Global Config |
|---|---|---|---|---|---|
| classNames | Customize class for each semantic structure inside the component. Supports object or function. | Record<SemanticDOM, string> | (info: { props })=> Record<SemanticDOM, string> | - | 5.23.0 | |
| defaultValue | The default value of the 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 interactive | boolean | false | × | |
| keyboard | Support using keyboard to move handlers | boolean | true | 5.2.0+ | × |
| dots | Whether the thumb can only be dragged to tick marks | boolean | false | × | |
| included | Takes effect when marks is not null. True means containment and false means coordinative | boolean | true | × | |
| marks | Tick marks of Slider. The type of key must be number, and must be 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 | × | |
| orientation | Orientation | horizontal | vertical | horizontal | × | |
| range | Enable dual thumb mode for range selection | boolean | false | × | |
| reverse | Reverse the component | boolean | false | × | |
| step | The granularity the slider can step through values. Must be greater than 0, and be divisible by (max - min). When step is null and marks exist, valid points will only be marks, min and max | number | null | 1 | × | |
| styles | Customize inline style for each semantic structure inside the component. Supports object or function. | Record<SemanticDOM, CSSProperties> | (info: { props })=> Record<SemanticDOM, CSSProperties> | - | 5.23.0 | |
| tooltip | The tooltip related 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. Simultaneously existing with orientation, orientation takes priority | 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 | - | × | |
Style of the slider handle, please use styles.handle instead | CSSProperties | - | - | × | |
Callback fired when mouseup or keyup is fired, please use onChangeComplete instead | (value) => void | - | - | × | |
Style of the slider rail, please use styles.rail instead | CSSProperties | - | - | × | |
Style of the slider track, please use styles.track instead | CSSProperties | - | - | × |
| Property | Description | Type | Default | Version |
|---|---|---|---|---|
| draggableTrack | Whether range track can be dragged | boolean | false | - |
| editable | Dynamic edit nodes. Cannot 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 always be visible; if false, it will never be visible, even when 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 the body | (triggerNode) => HTMLElement | () => document.body | 4.23.0 |
| formatter | Slider will pass its value to formatter, display its value in Tooltip, and hide the Tooltip when the returned 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 |
| Token Name | Description | Type | Default Value |
|---|---|---|---|
| colorBgElevated | Container background color of the popup layer, in dark mode the color value of this token will be a little brighter than `colorBgContainer`. E.g: modal, pop-up, menu, etc. | string | #ffffff |
| colorFillContentHover | Control the style of background color of content area when mouse hovers over it. | string | rgba(0,0,0,0.15) |
| colorPrimaryBorderHover | The hover state of the stroke color under the main color gradient, which will be used when the stroke Hover of components such as Slider and Button. | string | #69b1ff |
| colorText | Default text color which comply with W3C standards, and this color is also the darkest neutral color. | string | rgba(0,0,0,0.88) |
| colorTextDescription | Control the font color of text description. | string | rgba(0,0,0,0.45) |
| borderRadiusXS | XS size border radius, used in some small border radius components, such as Segmented, Arrow and other components with small border radius. | number | 2 |
| controlHeight | The height of the basic controls such as buttons and input boxes in Ant Design | number | 32 |
| controlHeightLG | LG component height | number | 40 |
| fontFamily | The font family of Ant Design prioritizes the default interface font of the system, and provides a set of alternative font libraries that are suitable for screen display to maintain the readability and readability of the font under different platforms and browsers, reflecting the friendly, stable and professional characteristics. | string | -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji' |
| fontSize | The most widely used font size in the design system, from which the text gradient will be derived. | number | 14 |
| lineHeight | Line height of text. | number | 1.5714285714285714 |
| motionDurationMid | Motion speed, medium speed. Used for medium element animation interaction. | string | 0.2s |
| motionDurationSlow | Motion speed, slow speed. Used for large element animation interaction. | string | 0.3s |