fix(slider): click issue

koory1st · Dec 18, 2023 · 71a741f · 71a741f
1 parent 9f69d63
commit 71a741f
Show file tree

Hide file tree

Showing 2 changed files with 63 additions and 31 deletions.
diff --git 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
@@ -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,36 +115,42 @@
   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();
       return secondButtonDown;
     }
 
     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>