fix: slider external updates not reflected in UI

hperrin · Apr 26, 2021 · d46b854 · d46b854
1 parent 000375c
commit d46b854
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 0 deletions.
diff --git a/packages/slider/Slider.svelte b/packages/slider/Slider.svelte
@@ -285,6 +285,26 @@
     removeLayoutListener = addLayoutListener(layout);
   }
 
+  let previousValue = value;
+  let previousStart = start;
+  let previousEnd = end;
+  $: if (instance) {
+    if (previousValue !== value) {
+      instance.setValue(value);
+    }
+    if (previousStart !== start) {
+      instance.setValueStart(start);
+    }
+    if (previousEnd !== end) {
+      instance.setValue(end);
+    }
+    previousValue = value;
+    previousStart = start;
+    previousEnd = end;
+    // Needed for range start to take effect.
+    instance.layout();
+  }
+
   onMount(() => {
     instance = new MDCSliderFoundation({
       hasClass,
@@ -299,11 +319,14 @@
         if (range) {
           if (thumb === Thumb.START) {
             start = Number(val);
+            previousStart = start;
           } else {
             end = Number(val);
+            previousEnd = end;
           }
         } else {
           value = Number(val);
+          previousValue = value;
         }
       },
       getInputAttribute: getInputAttr,

diff --git a/site/src/routes/demo/slider/_Range.svelte b/site/src/routes/demo/slider/_Range.svelte
@@ -8,10 +8,20 @@
   input$aria-label="Range slider"
 />
 
+<div>
+  <Button
+    on:click={() => {
+      valueStart = 0;
+      valueEnd = 10;
+    }}>Maximum Range!</Button
+  >
+</div>
+
 <pre class="status">Value: {valueStart} - {valueEnd}</pre>
 
 <script>
   import Slider from '@smui/slider';
+  import Button from '@smui/button';
 
   let valueStart = 1;
   let valueEnd = 4;

diff --git a/site/src/routes/demo/slider/_Simple.svelte b/site/src/routes/demo/slider/_Simple.svelte
@@ -12,11 +12,14 @@
   <p>No wonder.</p>
 {/if}
 
+<div><Button on:click={() => (value = 100)}>Maximum Wonder!</Button></div>
+
 <pre class="status">Value: {value}</pre>
 
 <script>
   import Slider from '@smui/slider';
   import FormField from '@smui/form-field';
+  import Button from '@smui/button';
 
   let value = 50;
 </script>