fix: range input styling on gecko based browsers (#98)

theacodes · Nov 9, 2024 · af6b00c · af6b00c
1 parent e61fc66
commit af6b00c
Showing 1 changed file with 25 additions and 0 deletions.
diff --git 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);
+            }
         `,
     ];