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

@@ -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,
   }

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)