ADDED: Color variables for convenient codding styles

src/styles/input-styles/slider.sass

@@ -1,14 +1,17 @@
+@use 'sass:math'
+@import '../css/colors-variables'
+
 @mixin input-range-thumb-mixin
     @include elevation-1(false)
 
-    &:hover
-        &::after
-            content: '1'
+    &::after
+        content: '1'
 
-        outline: 10px solid color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent)
+    &:hover
+        outline: 10px solid color-mix(in srgb, $primary 8%, transparent)
 
     &:is(:active, :focus-visible)
-        outline: 10px solid color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent)
+        outline: 10px solid color-mix(in srgb, $primary 12%, transparent)
 
     width: 20px
     height: 20px
@@ -16,34 +19,45 @@
     border-radius: 50%
     box-sizing: border-box
     outline: 10px solid transparent
-    background: var(--md-sys-color-primary)
+    background: $primary
     transition: .2s cubic-bezier(0.2, 0, 0, 1)
 
 div.m3.m3-slider-container
     height: 20px
     display: flex
+    position: relative
     align-items: center
 
-    div.m3.m3-slider-label
+    & > input::-webkit-slider-thumb:hover + div.m3.m3-slider-label
+        opacity: 1
+
+    & > div.m3.m3-slider-label
         @include center(inline-flex)
+
+        top: -10px
+        opacity: 0
+        width: 28px
         position: absolute
         pointer-events: none
+        height: 14px * math.sqrt(2) + 14px
 
         &::before
+            top: 0
             content: ""
             width: 28px
             rotate: 45deg
             aspect-ratio: 1
             position: absolute
             border-radius: 14px 14px 0 14px
-            background-color: var(--md-sys-color-primary)
+            background-color: $primary
 
         & > label.m3.m3-typography
             display: inline
             font-weight: 500
+            margin-top: -5px
             position: absolute
             font-size: 12px !important
-            color: var(--md-sys-color-on-primary)
+            color: $on-primary
 
     & > datalist
         display: none
@@ -52,8 +66,29 @@ input[type="range"].m3.m3-slider
     margin: 0
     appearance: none
     border-radius: 2px
-    margin-inline: 8px
-    background: linear-gradient(to right, var(--md-sys-color-primary) 0%, var(--md-sys-color-surface-container-highest) 0%)
+    background: $surface-container-highest
+
+    &:-moz-any(&)
+        height: 4px
+
+    &:-webkit-any(&)
+        background: linear-gradient(to right, $primary 0%, $surface-container-highest 0%)
+
+    &::-moz-range-track
+        height: 4px
+        overflow: hidden
+        border-radius: 2px
+
+    &::-moz-range-progress
+        height: 4px
+        overflow: hidden
+        border-radius: 2px
+        background-color: $primary
+
+    &::-moz-range-thumb
+        @include input-range-thumb-mixin
+
+        border: none
 
     &::-webkit-slider-container
         height: 4px