From 21c09ef3d8daaa25130ac7e6c387573da65d9864 Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Mon, 28 Sep 2020 14:05:53 -0700
Subject: [PATCH 1/3] fix(slider): listen to mouse/touch movement on document
 body

#288
---
 src/Slider/Slider.svelte | 46 ++++++++++++++++++++--------------------
 1 file changed, 23 insertions(+), 23 deletions(-)

diff --git a/src/Slider/Slider.svelte b/src/Slider/Slider.svelte
index 47242b1a..4069ff97 100644
--- a/src/Slider/Slider.svelte
+++ b/src/Slider/Slider.svelte
@@ -1,9 +1,9 @@
 <script>
   /**
    * Specify the value of the slider
-   * @type {string} [value=""]
+   * @type {number} [value=0]
    */
-  export let value = "";
+  export let value = 0;
 
   /**
    * Set the maximum slider value
@@ -119,6 +119,13 @@
 
   function stopHolding() {
     holding = false;
+    dragging = false;
+  }
+
+  function move() {
+    if (holding) {
+      startDragging();
+    }
   }
 
   function calcValue(e) {
@@ -159,6 +166,13 @@
   }
 </script>
 
+<svelte:body
+  on:mousemove="{move}"
+  on:touchmove="{move}"
+  on:mouseup="{stopHolding}"
+  on:touchend="{stopHolding}"
+  on:touchcancel="{stopHolding}" />
+
 <div
   class:bx--form-item="{true}"
   {...$$restProps}
@@ -182,21 +196,15 @@
       tabindex="-1"
       class:bx--slider="{true}"
       class:bx--slider--disabled="{disabled}"
-      on:click="{startDragging}"
-      on:mousemove="{() => {
-        if (holding) {
-          startDragging();
+      on:mousedown="{startDragging}"
+      on:mousedown="{startHolding}"
+      on:touchstart="{startHolding}"
+      on:keydown="{({ shiftKey, key }) => {
+        const keys = { ArrowDown: -1, ArrowLeft: -1, ArrowRight: 1, ArrowUp: 1 };
+        if (keys[key]) {
+          value += step * (shiftKey ? range / step / stepMultiplier : 1) * keys[key];
         }
       }}"
-      on:touchmove="{() => {
-        if (holding) {
-          startDragging();
-        }
-      }}"
-      on:mouseup="{stopHolding}"
-      on:touchup="{stopHolding}"
-      on:touchend="{stopHolding}"
-      on:touchcancel="{stopHolding}"
     >
       <div
         role="slider"
@@ -206,14 +214,6 @@
         aria-valuemax="{max}"
         aria-valuemin="{min}"
         aria-valuenow="{value}"
-        on:mousedown="{startHolding}"
-        on:touchstart="{startHolding}"
-        on:keydown="{({ shiftKey, key }) => {
-          const keys = { ArrowDown: -1, ArrowLeft: -1, ArrowRight: 1, ArrowUp: 1 };
-          if (keys[key]) {
-            value += step * (shiftKey ? range / step / stepMultiplier : 1) * keys[key];
-          }
-        }}"
         id="{id}"
       ></div>
       <div bind:this="{trackRef}" class:bx--slider__track="{true}"></div>

From 5e8915df7fcfee9bce81c95420c98369313c2351 Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Mon, 28 Sep 2020 14:08:24 -0700
Subject: [PATCH 2/3] fix(slider): dispatch change event in reactive statement

Removes afterUpdate method
---
 src/Slider/Slider.svelte | 12 +++++-------
 1 file changed, 5 insertions(+), 7 deletions(-)

diff --git a/src/Slider/Slider.svelte b/src/Slider/Slider.svelte
index 4069ff97..af658e5f 100644
--- a/src/Slider/Slider.svelte
+++ b/src/Slider/Slider.svelte
@@ -101,7 +101,7 @@
    */
   export let ref = null;
 
-  import { createEventDispatcher, afterUpdate } from "svelte";
+  import { createEventDispatcher } from "svelte";
 
   const dispatch = createEventDispatcher();
 
@@ -144,12 +144,6 @@
     value = nextValue;
   }
 
-  afterUpdate(() => {
-    if (!holding) {
-      dispatch("change", value);
-    }
-  });
-
   $: range = max - min;
   $: left = ((value - min) / range) * 100;
   $: {
@@ -163,6 +157,10 @@
       calcValue(event);
       dragging = false;
     }
+
+    if (!holding) {
+      dispatch("change", value);
+    }
   }
 </script>
 

From 4be4c498b6efd4fc2c6b7e7a9c7dee105a543ee1 Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Mon, 28 Sep 2020 14:10:30 -0700
Subject: [PATCH 3/3] fix(slider): dont update slider if disabled

---
 src/Slider/Slider.Story.svelte | 2 +-
 src/Slider/Slider.svelte       | 4 +++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/Slider/Slider.Story.svelte b/src/Slider/Slider.Story.svelte
index ecb00a0b..9ca44e8e 100644
--- a/src/Slider/Slider.Story.svelte
+++ b/src/Slider/Slider.Story.svelte
@@ -4,7 +4,7 @@
   import Slider from "./Slider.svelte";
   import SliderSkeleton from "./Slider.Skeleton.svelte";
 
-  $: value = 50;
+  let value = 50;
 </script>
 
 {#if story === 'skeleton'}
diff --git a/src/Slider/Slider.svelte b/src/Slider/Slider.svelte
index af658e5f..6507704d 100644
--- a/src/Slider/Slider.svelte
+++ b/src/Slider/Slider.svelte
@@ -129,6 +129,8 @@
   }
 
   function calcValue(e) {
+    if (disabled) return;
+
     const offsetX = e.touches ? e.touches[0].clientX : e.clientX;
     const { left, width } = trackRef.getBoundingClientRect();
     let nextValue =
@@ -158,7 +160,7 @@
       dragging = false;
     }
 
-    if (!holding) {
+    if (!holding && !disabled) {
       dispatch("change", value);
     }
   }