fix: slider input now updates value

hperrin · Apr 6, 2021 · 0b16829 · 0b16829
1 parent 4a85665
commit 0b16829
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 10 deletions.
diff --git a/packages/slider/Slider.svelte b/packages/slider/Slider.svelte
@@ -35,7 +35,9 @@
       {step}
       {min}
       max={end}
-      value={start}
+      bind:value={start}
+      on:focusin={() => (thumbStartRippleActive = true)}
+      on:focusout={() => (thumbStartRippleActive = false)}
       on:change
       on:input
       {...inputStartAttrs}
@@ -49,7 +51,9 @@
       {step}
       min={start}
       {max}
-      value={end}
+      bind:value={end}
+      on:focusin={() => (thumbRippleActive = true)}
+      on:focusout={() => (thumbRippleActive = false)}
       on:change
       on:input
       {...inputProps}
@@ -65,7 +69,9 @@
       {step}
       {min}
       {max}
-      {value}
+      bind:value
+      on:focusin={() => (thumbRippleActive = true)}
+      on:focusout={() => (thumbRippleActive = false)}
       on:change
       on:input
       {...inputProps}
@@ -344,9 +350,13 @@
         // https://github.com/material-components/material-components-web/issues/6448
 
         if (range && thumb === Thumb.START) {
-          thumbStartRippleActive = false;
+          if (inputStart !== document.activeElement) {
+            thumbStartRippleActive = false;
+          }
         } else {
-          thumbRippleActive = false;
+          if (input !== document.activeElement) {
+            thumbRippleActive = false;
+          }
         }
       },
       registerEventHandler: (evtType, handler) => {

diff --git a/site/src/routes/demo/slider.svelte b/site/src/routes/demo/slider.svelte
@@ -7,7 +7,7 @@
 
   <div>
     <FormField align="end" style="display: flex;">
-      <Slider style="flex-grow: 1;" bind:value />
+      <Slider style="flex-grow: 1;" bind:value step={0.01} />
       <span
         slot="label"
         style="padding-right: 12px; width: max-content; display: block;"
@@ -16,7 +16,7 @@
     </FormField>
   </div>
 
-  <pre class="status">Value: {value}</pre>
+  <pre class="status">Value: {value.toFixed(2)}</pre>
 
   <div>
     Discrete with min/max/step:
@@ -38,9 +38,9 @@
 
     <Slider
       bind:value={valueSteps}
-      min={-10}
-      max={10}
-      step={2}
+      min={-100}
+      max={100}
+      step={5}
       discrete
       tickMarks
       input$aria-label="Tick mark slider"