From 5d1ceaa8569a952e0affbbde2cdd1fc3c77040de Mon Sep 17 00:00:00 2001
From: Lov`u`e <105651386+heappynd@users.noreply.github.com>
Date: Sun, 4 Aug 2024 10:46:48 +0800
Subject: [PATCH] fix(components): [slider] click on marks is inaccurately
 positioned (#15332)

* fix(components): [slider] click on marks is inaccurately positioned

closed #15330

* fix(components): [slider] inconsistent behavior in range mode

* refactor(components): [slider] simplify logic with setPosition method

---------

Co-authored-by: qiang <qw13131wang@gmail.com>
---
 packages/components/slider/src/composables/use-slide.ts | 6 ++++++
 packages/components/slider/src/slider.vue               | 2 ++
 2 files changed, 8 insertions(+)

diff --git a/packages/components/slider/src/composables/use-slide.ts b/packages/components/slider/src/composables/use-slide.ts
index 12700ba884..c87a212cb2 100644
--- a/packages/components/slider/src/composables/use-slide.ts
+++ b/packages/components/slider/src/composables/use-slide.ts
@@ -187,6 +187,11 @@ export const useSlide = (
     }
   }
 
+  const onSliderMarkerDown = (position: number) => {
+    if (sliderDisabled.value || initData.dragging) return
+    setPosition(position)
+  }
+
   return {
     elFormItem,
     slider,
@@ -203,6 +208,7 @@ export const useSlide = (
     onSliderWrapperPrevent,
     onSliderClick,
     onSliderDown,
+    onSliderMarkerDown,
     setFirstValue,
     setSecondValue,
   }
diff --git a/packages/components/slider/src/slider.vue b/packages/components/slider/src/slider.vue
index cc2b607a8e..05f3d5fc4a 100644
--- a/packages/components/slider/src/slider.vue
+++ b/packages/components/slider/src/slider.vue
@@ -83,6 +83,7 @@
             :key="key"
             :mark="item.mark"
             :style="getStopStyle(item.position)"
+            @mousedown.stop="onSliderMarkerDown(item.position)"
           />
         </div>
       </template>
@@ -158,6 +159,7 @@ const {
   onSliderWrapperPrevent,
   onSliderClick,
   onSliderDown,
+  onSliderMarkerDown,
   setFirstValue,
   setSecondValue,
 } = useSlide(props, initData, emit)