From 71a741fa3cf7b4294827b3c7decbc7c5b7379ab6 Mon Sep 17 00:00:00 2001
From: koory1st <32436334@qq.com>
Date: Mon, 18 Dec 2023 18:59:19 +0800
Subject: [PATCH] fix(slider): click issue

---
 packages/slider/src/lib/button.svelte | 43 +++++++++++-----------
 packages/slider/src/lib/slider.svelte | 51 +++++++++++++++++++++------
 2 files changed, 63 insertions(+), 31 deletions(-)

diff --git a/packages/slider/src/lib/button.svelte b/packages/slider/src/lib/button.svelte
index 0414b1da..9db643b0 100644
--- a/packages/slider/src/lib/button.svelte
+++ b/packages/slider/src/lib/button.svelte
@@ -15,6 +15,7 @@
   export let sliderSize = 1;
   export let disabled = false;
   export let updateValue;
+  export let oldValue;
 
   let button;
   $: hovering = false;
@@ -43,7 +44,6 @@
   $: newPosition = 0;
   $: currentY = 0;
   $: currentX = 0;
-  $: oldValue = 0;
 
   function handleMouseEnter() {
     hovering = true;
@@ -59,6 +59,7 @@
 
   export function onButtonDown(event) {
     if (disabled) return;
+    event.preventDefault();
     onDragStart(event);
     window.addEventListener('mousemove', onDragging);
     window.addEventListener('touchmove', onDragging);
@@ -82,22 +83,24 @@
   }
 
   function onDragging(event) {
-    if (dragging) {
-      isClick = false;
-      // displayTooltip();
-      resetSize();
-      let diff;
-      const { clientX, clientY } = getClientXY(event);
-      if (vertical) {
-        currentY = clientY;
-        diff = ((startY - currentY) / sliderSize) * 100;
-      } else {
-        currentX = clientX;
-        diff = ((currentX - startX) / sliderSize) * 100;
-      }
-      newPosition = startPosition + diff;
-      setPosition(newPosition);
+    if (!dragging) {
+      return;
+    }
+
+    isClick = false;
+    // displayTooltip();
+    resetSize();
+    let diff;
+    const { clientX, clientY } = getClientXY(event);
+    if (vertical) {
+      currentY = clientY;
+      diff = ((startY - currentY) / sliderSize) * 100;
+    } else {
+      currentX = clientX;
+      diff = ((currentX - startX) / sliderSize) * 100;
     }
+    newPosition = startPosition + diff;
+    setPosition(newPosition);
   }
 
   function getClientXY(event) {
@@ -165,18 +168,16 @@
 </script>
 
 <div
-  aria-valuenow="0"
   bind:this={button}
   class={wrapperClass}
   on:blur={handleMouseLeave}
   on:focus={handleMouseEnter}
-  on:mousedown|preventDefault={onButtonDown}
+  on:mousedown={onButtonDown}
   on:mouseenter={handleMouseEnter}
   on:mouseleave={handleMouseLeave}
-  on:touchstart|preventDefault={onButtonDown}
-  role="slider"
+  on:touchstart={onButtonDown}
   style={wrapperStyleStr}
-  tabindex="0"
+  tabindex={disabled ? -1 : 0}
 >
   <div class={buttonClass} />
 </div>
diff --git a/packages/slider/src/lib/slider.svelte b/packages/slider/src/lib/slider.svelte
index 1480e7db..86b445d4 100644
--- a/packages/slider/src/lib/slider.svelte
+++ b/packages/slider/src/lib/slider.svelte
@@ -2,7 +2,7 @@
   import SvelInputNumber from '@svelement-ui/input-number';
   import a2s from '@svelement-ui/util-array-2-class-string';
   import Button from '$lib/button.svelte';
-  import { createEventDispatcher, tick } from 'svelte';
+  import { createEventDispatcher, onMount, tick } from 'svelte';
 
   const dispatch = createEventDispatcher();
 
@@ -18,6 +18,31 @@
   let slider;
   let firstButton;
 
+  onMount(async () => {
+    if (range) {
+      if (Array.isArray(value)) {
+        firstValue = Math.max(min, value[0]);
+        secondValue = Math.min(max, value[1]);
+      } else {
+        firstValue = min;
+        secondValue = max;
+      }
+      oldValue = [firstValue, secondValue];
+    } else {
+      if (typeof value !== 'number' || Number.isNaN(value)) {
+        firstValue = min;
+      } else {
+        firstValue = Math.min(max, Math.max(min, value));
+      }
+      oldValue = firstValue;
+    }
+
+    window.addEventListener('resize', resetSize);
+
+    await tick();
+    resetSize();
+  });
+
   $: sliderDisabled = disabled;
   $: sliderWrapperClass = a2s([
     'svel-slider',
@@ -35,7 +60,7 @@
   $: range = false;
 
   $: firstValue = 0;
-  $: secondValue = max;
+  $: secondValue = 0;
   $: oldValue = 0;
   $: dragging = false;
   $: sliderSize = 1;
@@ -62,9 +87,9 @@
   let secondButtonDown;
 
   async function onSliderDown(e) {
-    const buttonRef = handleSliderPointerEvent(e);
+    const buttonDown = handleSliderPointerEvent(e);
     await tick();
-    firstButtonDown(e);
+    buttonDown(e);
   }
 
   function handleSliderPointerEvent(e) {
@@ -90,13 +115,13 @@
   function setPosition(percent) {
     const targetValue = min + (percent * (max - min)) / 100;
     if (range) {
-      firstButtonSetPosition();
+      firstButtonSetPosition(percent);
       return firstButtonDown;
     }
 
     if (Math.abs(minValue - targetValue) < Math.abs(maxValue - targetValue)) {
       if (firstValue < secondValue) {
-        firstButtonSetPosition();
+        firstButtonSetPosition(percent);
         return firstButtonDown;
       }
       secondButtonSetPosition();
@@ -104,22 +129,28 @@
     }
 
     if (firstValue > secondValue) {
-      firstButtonSetPosition();
+      firstButtonSetPosition(percent);
       return firstButtonDown;
     }
-    secondButtonSetPosition();
+    secondButtonSetPosition(percent);
     return secondButtonDown;
   }
 </script>
 
 <div class={sliderWrapperClass} role={range ? 'group' : undefined}>
-  <div bind:this={slider} class={sliderRunwayClass} on:mousedown={onSliderDown}>
+  <div
+    bind:this={slider}
+    class={sliderRunwayClass}
+    on:mousedown={onSliderDown}
+    on:touchstart={onSliderDown}
+  >
     <div class="svel-slider__bar" />
     <Button
       aria-disabled={sliderDisabled}
       aria-orientation={vertical ? 'vertical' : 'horizontal'}
       aria-valuemin={min}
       aria-valuenow={firstValue}
+      bind:oldValue
       bind:onButtonDown={firstButtonDown}
       bind:setPosition={firstButtonSetPosition}
       bind:this={firstButton}
@@ -131,7 +162,7 @@
       {vertical}
     />
   </div>
-  {#if showInput}
+  {#if showInput && !range}
     <SvelInputNumber bind:value={firstValue} {min} {max} {step} disabled={sliderDisabled} />
   {/if}
 </div>