feat: slider add on MouseUp

content/input/slider/index-en-US.md

@@ -241,17 +241,17 @@ import { Slider } from '@douyinfe/semi-ui';
 ## 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 |-|-|
+| -------------- |-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| ------------- |---------|------ |
+| 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   |- |
 | 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|
+| railStyle | Style for slide rail                                                                                                                                                                                                                                                                                  | CSSProperties | -       |0.31.0|
 | range          | Toggle whether it is allow to move slider from both sides                                                                                                                                                                                                                                             | boolean       | false   |- |
 | showBoundary   | Toggle whether show max/min value when hover                                                                                                                                                                                                                                                          | boolean       | false   |- |
 | step           | Increment between successive values                                                                                                                                                                                                                                                                   | number        | 1       |- |
@@ -259,10 +259,11 @@ import { Slider } from '@douyinfe/semi-ui';
 | 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 |-|
+| 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      | -       |- |
-| 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 |-|-|
+| 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

content/input/slider/index.md

@@ -227,29 +227,30 @@ import { Slider } from '@douyinfe/semi-ui';
 ```
 
 ## API参考
-| 属性  | 说明                                                                                                                                                                 | 类型   | 默认值 | 版本 | 
-|-------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------|-----------------|--------|-------|
-| aria-label| [aria-label](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label)属性，用来给当前元素加上的标签描述, 提升可访问性                                       | string |-|-|
-| aria-labelledby | [aria-labelledby](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-labelledby)属性，表明某些元素的 id 是某一对象的标签。它被用来确定控件或控件组与它们标签之间的联系, 提升可访问性 | string |-|-|
-| aria-valuetext| [aria-valuetext](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-valuetext)属性，为滑块的当前值提供用户友好的名称。                                    | string |-|-|
-| defaultValue | 设置初始取值                                                                                                                                                             | number \| number[] | 0 |-|
-| disabled | 滑块是否禁用                                                                                                                                                             | boolean | false |-|
-| included | `marks` 不为空对象时有效，值为 true 时表示值为包含关系，false 表示并列                                                                                                                      | boolean | true |-|
-| marks | 刻度，key 的类型必须为 `number` 且取值在闭区间 \[min, max] 内                                                                                                                       | Record<number, string \> | 无 |-|
-| max | 最大值                                                                                                                                                                | number | 100 |-|
-| min | 最小值                                                                                                                                                                | number | 0 |-|
-| railStyle | 滑块轨道的样式                                                                                                                                                            | CSSProperties | - |0.31.0|
-| range | 是否支持两边同时可滑动                                                                                                                                                        | boolean | false |-|
-| showBoundary | 是否在 hover 时展示最大值最小值                                                                                                                                                | boolean | false |-|
-| step | 步长                                                                                                                                                                 | number | 1 |-|
-| tipFormatter | 设置Tooltip的展示格式，默认显示当前选值                                                                                                                                            | (value: string \| number \| boolean \| (string \| number \| boolean)[]) => any | v => v |-|
-| tooltipVisible | 是否始终显示Tooltip                                                                                                                                                      | boolean | 无 |-|
-| value | 设置当前取值                                                                                                                                                             | number \| number[] |  |-|
-| vertical | 是否设置方向为垂直                                                                                                                                                          | boolean | false |-|
-| verticalReverse | 反转垂直方向，即上大下小 >=1.29.0                                                                                                                                              | boolean | false |-|
-| onAfterChange | 值变化后触发，把当前值作为参数传入                                                                                                                                                  | (value: number \| number[]) => void | 无 |-|
-| onChange | 当 Slider 的值发生改变时的回调                                                                                                                                                | (value: number \| number[]) => void | 无 |-|
-| getAriaValueText | 用于给滑块的当前值提供一个用户友好的名称，对屏幕阅读器用户很重要，参数value为当前滑块的值，index为当前滑块的顺序                                                                                                      | (value: number, index?: number) => string |-|-|
+| 属性  | 说明                                                                                                                                                                 | 类型                                                                            | 默认值 | 版本     | 
+|-------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------|-------------------------------------------------------------------------------|--------|--------|
+| aria-label| [aria-label](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label)属性，用来给当前元素加上的标签描述, 提升可访问性                                       | string                                                                        |-| -      |
+| aria-labelledby | [aria-labelledby](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-labelledby)属性，表明某些元素的 id 是某一对象的标签。它被用来确定控件或控件组与它们标签之间的联系, 提升可访问性 | string                                                                        |-| -      |
+| aria-valuetext| [aria-valuetext](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-valuetext)属性，为滑块的当前值提供用户友好的名称。                                    | string                                                                        |-| -      |
+| defaultValue | 设置初始取值                                                                                                                                                             | number \| number[]                                                            | 0 | -      |
+| disabled | 滑块是否禁用                                                                                                                                                             | boolean                                                                       | false | -      |
+| included | `marks` 不为空对象时有效，值为 true 时表示值为包含关系，false 表示并列                                                                                                                      | boolean                                                                       | true | -      |
+| marks | 刻度，key 的类型必须为 `number` 且取值在闭区间 \[min, max] 内                                                                                                                       | Record<number, string \>                                                      | 无 | -      |
+| max | 最大值                                                                                                                                                                | number                                                                        | 100 | -      |
+| min | 最小值                                                                                                                                                                | number                                                                        | 0 | -      |
+| railStyle | 滑块轨道的样式                                                                                                                                                            | CSSProperties                                                                 | - | 0.31.0 |
+| range | 是否支持两边同时可滑动                                                                                                                                                        | boolean                                                                       | false | -      |
+| showBoundary | 是否在 hover 时展示最大值最小值                                                                                                                                                | boolean                                                                       | false | -      |
+| step | 步长                                                                                                                                                                 | number                                                                        | 1 | -      |
+| tipFormatter | 设置Tooltip的展示格式，默认显示当前选值                                                                                                                                            | (value: string \| number \| boolean \| (string \| number \| boolean)[]) => any | v => v | -      |
+| tooltipVisible | 是否始终显示Tooltip                                                                                                                                                      | boolean                                                                       | 无 | -      |
+| value | 设置当前取值                                                                                                                                                             | number \| number[]                                                            |  | -      |
+| vertical | 是否设置方向为垂直                                                                                                                                                          | boolean                                                                       | false | -      |
+| verticalReverse | 反转垂直方向，即上大下小 >=1.29.0                                                                                                                                              | boolean                                                                       | false | -      |
+| onAfterChange | 值变化后触发，把当前值作为参数传入                                                                                                                                                  | (value: number \| number[]) => void                                           | 无 | -      |
+| onChange | 当 Slider 的值发生改变时的回调                                                                                                                                                | (value: number \| number[]) => void                                           | 无 | -      |
+| onMouseUp | 鼠标松开 handle 时触发 | (e: React.MouseEvent<HTMLDivElement\>) => void                                | 无 | 2.41.0 |
+| getAriaValueText | 用于给滑块的当前值提供一个用户友好的名称，对屏幕阅读器用户很重要，参数value为当前滑块的值，index为当前滑块的顺序                                                                                                      | (value: number, index?: number) => string                                     |-| -      |
 
 ## Accessibility
 

packages/semi-foundation/slider/foundation.ts

@@ -23,6 +23,7 @@ export interface SliderProps{
     vertical?: boolean;
     onAfterChange?: (value: SliderProps['value']) => void; // triggered when mouse up and clicked
     onChange?: (value: SliderProps['value']) => void;
+    onMouseUp?: (e: any) => void;
     tooltipVisible?: boolean;
     style?: Record<string, any>;
     className?: string;

packages/semi-ui/slider/index.tsx

@@ -43,6 +43,7 @@ export default class Slider extends BaseComponent<SliderProps, SliderState> {
         vertical: PropTypes.bool,
         onAfterChange: PropTypes.func, // OnmouseUp and triggered when clicked
         onChange: PropTypes.func,
+        onMouseUp: PropTypes.func,
         tooltipVisible: PropTypes.bool,
         style: PropTypes.object,
         className: PropTypes.string,
@@ -240,6 +241,7 @@ export default class Slider extends BaseComponent<SliderProps, SliderState> {
                 this.setState({ focusPos: '' });
             },
             onHandleUpBefore: (e: React.MouseEvent) => {
+                this.props.onMouseUp?.(e);
                 e.stopPropagation();
                 e.preventDefault();
                 document.body.removeEventListener('mousemove', this.foundation.onHandleMove, false);