From 412c0a36766a0b25d45cf9d92b66c2a19c496309 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Tue, 21 Jun 2022 15:25:37 +0100
Subject: [PATCH] Separate style overrides for range input to fix not
 displaying on webkit

---
 packages/bbui/src/Form/Core/Slider.svelte | 21 ++++++++++++++++++---
 1 file changed, 18 insertions(+), 3 deletions(-)

diff --git a/packages/bbui/src/Form/Core/Slider.svelte b/packages/bbui/src/Form/Core/Slider.svelte
index b49f648d88..1a601d0185 100644
--- a/packages/bbui/src/Form/Core/Slider.svelte
+++ b/packages/bbui/src/Form/Core/Slider.svelte
@@ -48,9 +48,18 @@
     outline: none;
   }
 
-  input[type="range"]::-webkit-slider-thumb,
-  input[type="range"]::-moz-range-thumb {
+  input[type="range"]::-webkit-slider-thumb {
     -webkit-appearance: none;
+    border: 2px solid var(--spectrum-global-color-gray-700);
+    height: 16px;
+    width: 16px;
+    border-radius: 50%;
+    background: var(--background);
+    cursor: pointer;
+    transition: background 130ms ease-out;
+    margin-top: -7px;
+  }
+  input[type="range"]::-moz-range-thumb {
     border: 2px solid var(--spectrum-global-color-gray-700);
     height: 12px;
     width: 12px;
@@ -60,7 +69,13 @@
     transition: background 130ms ease-out;
   }
 
-  input[type="range"]::-webkit-slider-runnable-track,
+  input[type="range"]::-webkit-slider-runnable-track {
+    width: 100%;
+    height: 2px;
+    cursor: pointer;
+    background: var(--spectrum-global-color-gray-300);
+    border-radius: 2px;
+  }
   input[type="range"]::-moz-range-track {
     width: 100%;
     height: 2px;