fix(Slider): reactivity

Signed-off-by: Florian-Schoenherr <[email protected]>

Author: Florian-Schoenherr

packages/docs/src/examples/Slider/minMax.svelte

@@ -8,18 +8,18 @@
 </script>
 
 <Subheader>Default Slider</Subheader>
-<Slider {min} {max} bind:value={slider} hint="Hint Text">
-  <span slot="append">
+<Slider {min} {max} bind:value={slider}>
+  <span slot="append-outer">
     <TextField bind:value={slider} />
   </span>
 </Slider>
 
 <Subheader>Range</Subheader>
 <Slider {min} {max} bind:value={range}>
-  <span slot="prepend">
+  <span slot="prepend-outer">
     <TextField bind:value={range[0]} />
   </span>
-  <span slot="append">
-    <TextField bind:value={range[1]} />
+  <span slot="append-outer">
+    <TextField class="ml-3" bind:value={range[1]} />
   </span>
 </Slider>

packages/svelte-materialify/src/components/Slider/Slider.svelte

@@ -1,10 +1,10 @@
 <script>
   import Input from '../Input';
-  import { onMount, afterUpdate, createEventDispatcher } from 'svelte';
+  import { onMount, createEventDispatcher } from 'svelte';
 
   let sliderElement;
   let slider;
-  let localValue;
+  let internalValue;
   const dispatch = createEventDispatcher();
 
   export let min = 0;
@@ -70,7 +70,7 @@
     slider = sliderElement.noUiSlider;
     slider.on('update', (val, handle) => {
       value = format(val);
-      localValue = value;
+      internalValue = value;
       dispatch('update', { value: val, handle });
     });
     slider.on('change', (val, handle) => {
@@ -82,22 +82,20 @@
     };
   });
 
-  $: {
-    if (slider != null) {
-      slider.updateOptions({
-        range: { min, max },
-        orientation: vertical ? 'vertical' : 'horizontal',
-        connect,
-        margin,
-        limit,
-        padding,
-      });
-    }
+  $: if (slider) {
+    if(value !== internalValue) slider.set(value, false);
+    slider.updateOptions({
+      start: value,
+      range: { min, max },
+      orientation: vertical ? 'vertical' : 'horizontal',
+      connect,
+      margin,
+      limit,
+      padding,
+      step
+    }, false);
   }
 
-  afterUpdate(() => {
-    if (slider && value !== localValue) slider.set(value, false);
-  });
 </script>
 
 <style lang="scss" src="./Slider.scss" global>