From 5c14cde605a835f0c53a7f98a8b7966246145335 Mon Sep 17 00:00:00 2001
From: Eric Y Liu <ericyl.us@gmail.com>
Date: Thu, 18 Mar 2021 15:44:34 -0700
Subject: [PATCH] fix(slider): use CSS to hide input if hideTextInput is true

---
 src/Slider/Slider.svelte | 38 ++++++++++++++++++++++----------------
 1 file changed, 22 insertions(+), 16 deletions(-)

diff --git a/src/Slider/Slider.svelte b/src/Slider/Slider.svelte
index fd327af4..4b6ea799 100644
--- a/src/Slider/Slider.svelte
+++ b/src/Slider/Slider.svelte
@@ -191,21 +191,27 @@
       />
     </div>
     <span class:bx--slider__range-label="{true}">{maxLabel || max}</span>
-    {#if !hideTextInput}
-      <input
-        type="{inputType}"
-        id="input-{id}"
-        aria-label="{$$props['aria-label'] || 'Slider number input'}"
-        class:bx--text-input="{true}"
-        class:bx--slider-text-input="{true}"
-        class:bx--text-input--light="{light}"
-        class:bx--text-input--invalid="{invalid}"
-        on:change="{({ target }) => {
-          value = Number(target.value);
-        }}"
-        disabled="{disabled}"
-        value="{value}"
-      />
-    {/if}
+    <input
+      type="{hideTextInput ? 'hidden' : inputType}"
+      style="{hideTextInput ? 'display: none' : undefined}"
+      id="input-{id}"
+      name="{name}"
+      class:bx--text-input="{true}"
+      class:bx--slider-text-input="{true}"
+      class:bx--text-input--light="{light}"
+      class:bx--text-input--invalid="{invalid}"
+      value="{value}"
+      aria-label="{$$props['aria-label'] || 'Slider number input'}"
+      disabled="{disabled}"
+      required="{required}"
+      min="{min}"
+      max="{max}"
+      step="{step}"
+      on:change="{({ target }) => {
+        value = Number(target.value);
+      }}"
+      data-invalid="{invalid || null}"
+      aria-invalid="{invalid || null}"
+    />
   </div>
 </div>