|
|
@@ -238,35 +238,52 @@ import { Slider } from '@douyinfe/semi-ui';
|
|
|
);
|
|
|
```
|
|
|
|
|
|
+### Handle with dot
|
|
|
+```jsx live=true
|
|
|
+ <div>
|
|
|
+ <div>
|
|
|
+ <div>Default</div>
|
|
|
+ <Slider showBoundary={true} handleDot={{size:'4px',color:'blue'}}></Slider>
|
|
|
+ </div>
|
|
|
+ <br/>
|
|
|
+ <br/>
|
|
|
+ <div>
|
|
|
+ <div>Range</div>
|
|
|
+ <Slider defaultValue={[20, 60]} range handleDot={[{size:'4px',color:'blue'},{size:'4px',color:'pink'}]}></Slider>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+```
|
|
|
+
|
|
|
## API Reference
|
|
|
|
|
|
-| Property | Instructions | type | Default | Version |
|
|
|
-|------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| ------------- |---------|------ |
|
|
|
-| aria-label | [aria-label](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label) used to define a string that labels the current element. Use it in cases where a text label is not visible on the screen | string | - |-|
|
|
|
-| aria-labelledby | [aria-labelledby](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-labelledby) attribute establishes relationships between objects and their label(s), and its value should be one or more element IDs, which refer to elements that have the text needed for labeling | string | - |-|
|
|
|
-| aria-valuetext | [aria-valuetext](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-valuetext) used to provide a user-friendly name for the current value of the slider | string | - |-|
|
|
|
-| defaultValue | Default value | number \| number[] | 0 |- |
|
|
|
-| disabled | Disable slider | boolean | false |- |
|
|
|
-| showMarkLabel | Whether to show the label | boolean | true | 2.48.0 |
|
|
|
-| included | Takes effect when `marks` is not null, true means containment and false means coordination | boolean | true |- |
|
|
|
-| marks | Tick mark of Slider, type of key must be number, and must in closed interval [min, max] | Record<number, string \> | - |- |
|
|
|
-| max | Maximum value of the slider. | number | 100 |- |
|
|
|
-| min | Minimum value of the slider. | number | 0 |- |
|
|
|
-| railStyle | Style for slide rail | CSSProperties | - |0.31.0|
|
|
|
-| range | Toggle whether it is allow to move slider from both sides | boolean | false |- |
|
|
|
-| showArrow | whether the tooltip has an arrow | boolean | true | 2.48.0|
|
|
|
-| showBoundary | Toggle whether show max/min value when hover | boolean | false |- |
|
|
|
-| step | Increment between successive values | number | 1 |- |
|
|
|
-| tipFormatter | Format Tooltip content, by default display current value | (value: string \| number \| boolean \| (string \| number \| boolean)[]) => any | v => v |- |
|
|
|
-| tooltipOnMark | Whether the mark on the slide rail has a tooltip | false | 2.48.0 |
|
|
|
-| tooltipVisible | Toggle whether to display tooltip all the time | boolean | - |- |
|
|
|
-| value | Set current value, used in controlled component | number \| number[] | |- |
|
|
|
-| vertical | Toggle whether to display slider vertically | boolean | false |- |
|
|
|
-| verticalReverse | Vertical but reverse direction >=1.29.0 | boolean | false |-|
|
|
|
-| onAfterChange | Triggered when slider changed, passed in current value as params | (value: number \| number[]) => void | - |- |
|
|
|
-| onChange | Callback function when slider value changes | (value: number \| number[]) => void | - |- |
|
|
|
-| onMouseUp | Trigged when mouse up on handle | (e: React.MouseEvent<HTMLDivElement\>) => void | - | 2.41.0 |
|
|
|
-| getAriaValueText | Used to provide a user-friendly name for the current value of the slider, important for screen reader users, The parameters value and index are the current slider value, order | (value: number, index?: number) => string | - |-|
|
|
|
+| Property | Instructions | type | Default | Version |
|
|
|
+|------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|--------------------------------------------------------------------------------|---------|------ |
|
|
|
+| aria-label | [aria-label](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label) used to define a string that labels the current element. Use it in cases where a text label is not visible on the screen | string | - |-|
|
|
|
+| aria-labelledby | [aria-labelledby](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-labelledby) attribute establishes relationships between objects and their label(s), and its value should be one or more element IDs, which refer to elements that have the text needed for labeling | string | - |-|
|
|
|
+| aria-valuetext | [aria-valuetext](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-valuetext) used to provide a user-friendly name for the current value of the slider | string | - |-|
|
|
|
+| defaultValue | Default value | number \| number[] | 0 |- |
|
|
|
+| disabled | Disable slider | boolean | false |- |
|
|
|
+| handleDot | Whether to show the dot on the handle | { color: string, size: string} \| <br/> { color: string, size: string}[] | - | 2.52.0 |
|
|
|
+| included | Takes effect when `marks` is not null, true means containment and false means coordination | boolean | true |- |
|
|
|
+| marks | Tick mark of Slider, type of key must be number, and must in closed interval [min, max] | Record<number, string \> | - |- |
|
|
|
+| max | Maximum value of the slider. | number | 100 |- |
|
|
|
+| min | Minimum value of the slider. | number | 0 |- |
|
|
|
+| railStyle | Style for slide rail | CSSProperties | - |0.31.0|
|
|
|
+| range | Toggle whether it is allow to move slider from both sides | boolean | false |- |
|
|
|
+| showArrow | whether the tooltip has an arrow | boolean | true | 2.48.0|
|
|
|
+| showBoundary | Toggle whether show max/min value when hover | boolean | false |- |
|
|
|
+| showMarkLabel | Whether to show the label | boolean | true | 2.48.0 |
|
|
|
+| step | Increment between successive values | number | 1 |- |
|
|
|
+| tipFormatter | Format Tooltip content, by default display current value | (value: string \| number \| boolean \| (string \| number \| boolean)[]) => any | v => v |- |
|
|
|
+| tooltipOnMark | Whether the mark on the slide rail has a tooltip | false | 2.48.0 |
|
|
|
+| tooltipVisible | Toggle whether to display tooltip all the time | boolean | - |- |
|
|
|
+| value | Set current value, used in controlled component | number \| number[] | |- |
|
|
|
+| vertical | Toggle whether to display slider vertically | boolean | false |- |
|
|
|
+| verticalReverse | Vertical but reverse direction >=1.29.0 | boolean | false |-|
|
|
|
+| onAfterChange | Triggered when slider changed, passed in current value as params | (value: number \| number[]) => void | - |- |
|
|
|
+| onChange | Callback function when slider value changes | (value: number \| number[]) => void | - |- |
|
|
|
+| onMouseUp | Trigged when mouse up on handle | (e: React.MouseEvent<HTMLDivElement\>) => void | - | 2.41.0 |
|
|
|
+| getAriaValueText | Used to provide a user-friendly name for the current value of the slider, important for screen reader users, The parameters value and index are the current slider value, order | (value: number, index?: number) => string | - |-|
|
|
|
## Accessibility
|
|
|
|
|
|
### ARIA
|
代强