feat(slider): add on-dragstart on-dragend prop (#5382)

* feat(n-slider): add `on-dragstart` `on-dragend` prop * Update src/slider/demos/zhCN/index.demo-entry.md * Update src/slider/demos/enUS/index.demo-entry.md --------- Co-authored-by: 07akioni <07akioni2@gmail.com>
tusen-ai · Dec 3, 2023 · 8415104 · 8415104
1 parent 7a65d33
commit 8415104
Show file tree

Hide file tree

Showing 5 changed files with 11 additions and 1 deletion.
diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md
@@ -29,6 +29,7 @@
 - `n-upload` adds `file-list-class` and `trigger-class` props.
 - `n-dynamic-input` adds `input-class` and `tag-class` props.
 - `n-dynamic-input` adds `item-class` prop.
+- `n-slider` adds `on-dragstart` `on-dragend` prop, closes [#5365](https://github.com/tusen-ai/naive-ui/issues/5365).
 - `n-dialog` adds `close` slot.
 
 ## 2.35.0

diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md
@@ -29,6 +29,7 @@
 - `n-upload` 新增 `file-list-class` 和 `trigger-class` 属性
 - `n-dynamic-input` 新增 `input-class` 和 `tag-class` 属性
 - `n-dynamic-input` 新增 `item-class` 属性
+- `n-slider` 新增 `on-dragstart` `on-dragend` 属性，关闭 [#5365](https://github.com/tusen-ai/naive-ui/issues/5365)
 - `n-dialog` 新增 `close` 插槽
 
 ## 2.35.0

diff --git a/src/slider/demos/enUS/index.demo-entry.md b/src/slider/demos/enUS/index.demo-entry.md
@@ -41,6 +41,8 @@ custom-thumb.vue
 | vertical | `boolean` | `false` | Whether to enable vertical mode. |  |
 | value | `number \| [number, number] \| null` | `undefined` | Value of the slider. |  |
 | on-update:value | `(value: number \| [number, number]) => void` | `undefined` | Callback on value update. |  |
+| on-dragstart | `() => void` | `undefined` | Start dragging the callback function. | NEXT_VERSION |
+| on-dragend | `() => void` | `undefined` | Drag the end of the callback function. | NEXT_VERSION |
 
 ### Slider Slots
 

diff --git a/src/slider/demos/zhCN/index.demo-entry.md b/src/slider/demos/zhCN/index.demo-entry.md
@@ -42,6 +42,8 @@ keyboard-debug.vue
 | vertical | `boolean` | `false` | 是否启用垂直模式 |  |
 | value | `number \| [number, number] \| null` | `undefined` | 值 |  |
 | on-update:value | `(value: number \| [number, number]) => void` | `undefined` | 值更新的回调 |  |
+| on-dragstart | `() => void` | `undefined` | 开始拖拽的回调函数 | NEXT_VERSION |
+| on-dragend | `() => void` | `undefined` | 拖拽结束的回调函数 | NEXT_VERSION |
 
 ### Slider Slots
 

diff --git a/src/slider/src/Slider.tsx b/src/slider/src/Slider.tsx
@@ -96,7 +96,9 @@ export const sliderProps = {
   >,
   onUpdateValue: [Function, Array] as PropType<
   MaybeArray<(value: number & number[]) => void>
-  >
+  >,
+  onDragstart: [Function] as PropType<() => void>,
+  onDragend: [Function] as PropType<() => void>
 } as const
 
 export type SliderProps = ExtractPublicPropTypes<typeof sliderProps>
@@ -466,6 +468,7 @@ export default defineComponent({
     function startDragging (): void {
       if (!draggingRef.value) {
         draggingRef.value = true
+        if (props.onDragstart) call(props.onDragstart)
         on('touchend', document, handleMouseUp)
         on('mouseup', document, handleMouseUp)
         on('touchmove', document, handleMouseMove)
@@ -475,6 +478,7 @@ export default defineComponent({
     function stopDragging (): void {
       if (draggingRef.value) {
         draggingRef.value = false
+        if (props.onDragend) call(props.onDragend)
         off('touchend', document, handleMouseUp)
         off('mouseup', document, handleMouseUp)
         off('touchmove', document, handleMouseMove)