contributors
- Components Overview
- Changelogv6.1.4
- General
- Layout
- Navigation
- Data Entry
- Data Display
- Feedback
- Other
Used to input a value within a specified range.
Common props ref:Common props
| Property | Description | Type | Default | Version |
|---|---|---|---|---|
| classNames | Customize class for each semantic structure inside the component. Supports object or function. | Record<SemanticDOM, string> | (info: { props })=> Record<SemanticDOM, string> | - | |
| 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> | - | |
| 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 | - |
| 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 |
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.
You can customize the semantic dom style of Sliders by passing objects/functions through classNames and styles.
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.
