From 45e906cfa7beecbbf0d2334fea191233e531f17a Mon Sep 17 00:00:00 2001
From: Will Hack <18036720+willhack@users.noreply.github.com>
Date: Fri, 8 Nov 2024 22:23:19 -0500
Subject: [PATCH] fix: range input styling on gecko based browsers

---
 src/kc-ui/range.ts | 25 +++++++++++++++++++++++++
 1 file changed, 25 insertions(+)

diff --git a/src/kc-ui/range.ts b/src/kc-ui/range.ts
index 3b34583b..c9418aee 100644
--- a/src/kc-ui/range.ts
+++ b/src/kc-ui/range.ts
@@ -62,15 +62,29 @@ export class KCUIRangeElement extends KCUIElement {
                 border-radius: 0.5em;
                 background: var(--input-range-bg);
             }
+            input[type="range"]::-moz-range-track {
+                box-sizing: border-box;
+                height: 0.5em;
+                border: 1px solid transparent;
+                border-radius: 0.5em;
+                background: var(--input-range-bg);
+            }
 
             input[type="range"]:hover::-webkit-slider-runnable-track,
             input[type="range"]:focus::-webkit-slider-runnable-track {
                 border: 1px solid var(--input-range-hover-bg);
             }
+            input[type="range"]:hover::-moz-range-track,
+            input[type="range"]:focus::-moz-range-track {
+                border: 1px solid var(--input-range-hover-bg);
+            }
 
             input[type="range"]:disabled::-webkit-slider-runnable-track {
                 background: var(--input-range-disabled-bg);
             }
+            input[type="range"]:disabled::-moz-range-track {
+                background: var(--input-range-disabled-bg);
+            }
 
             input[type="range"]::-webkit-slider-thumb {
                 -webkit-appearance: none;
@@ -81,10 +95,21 @@ export class KCUIRangeElement extends KCUIElement {
                 margin-top: -0.3em;
                 background: var(--input-range-fg);
             }
+            input[type="range"]::-moz-range-thumb {
+                border: none;
+                height: 1em;
+                width: 1em;
+                border-radius: 100%;
+                margin-top: -0.3em;
+                background: var(--input-range-fg);
+            }
 
             input[type="range"]:focus::-webkit-slider-thumb {
                 box-shadow: var(--input-range-handle-shadow);
             }
+            input[type="range"]:focus::-moz-range-thumb {
+                box-shadow: var(--input-range-handle-shadow);
+            }
         `,
     ];