CHANGES: Added unoptimized progress bar inside <Slider> component

FIXED: Some styles

src/styles/input-styles/slider.sass

@@ -3,26 +3,30 @@ div.m3.m3-slider-container
     display: flex
     align-items: center
 
+    & > datalist
+        display: none
+
+
 input[type="range"].m3.m3-slider
     margin: 0
-    height: 4px
     appearance: none
-    overflow: visible
     border-radius: 2px
-    margin-inline: 10px
-    background-color: var(--md-sys-color-surface-container-highest)
+    margin-inline: 8px
+    background: linear-gradient(to right, var(--md-sys-color-primary) 0%, var(--md-sys-color-surface-container-highest) 0%)
 
     &::-webkit-slider-container
-        margin-inline: -8px
+        appearance: none
+        box-shadow: none
+        border-radius: 2px
+        min-block-size: 4px
+        height: 4px !important
+
+    &::-webkit-slider-runnable-track
+        height: 4px
 
     &::-webkit-slider-thumb
         @include elevation-1(false)
 
-        &::after
-            width: 40px
-            aspect-ratio: 1
-            background-color: transparent
-
         &:hover
             outline: 10px solid color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent)
 
@@ -32,8 +36,8 @@ input[type="range"].m3.m3-slider
         width: 20px
         aspect-ratio: 1
         appearance: none
-        overflow: visible
         border-radius: 50%
+        margin-top: -8px
         box-sizing: border-box
         outline: 10px solid transparent
         background: var(--md-sys-color-primary)