ADDED: Now you can turn on or off Ripple effect on buttons (not for icon buttons, soon it's fixed), density for segmented-buttons, typography mixins, and etc.

CHANGED: For optimizing write styles added a few mixins
FIXED: Bug with width in segmented-buttons

src/styles/input-styles/slider.sass

@@ -1,3 +1,26 @@
+@mixin input-range-thumb-mixin
+    @include elevation-1(false)
+
+    &:hover
+        &::after
+            content: '1'
+
+        outline: 10px solid color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent)
+
+    &:is(:active, :focus-visible)
+        outline: 10px solid color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent)
+
+    width: 20px
+    height: 20px
+    appearance: none
+    border-radius: 50%
+    box-sizing: border-box
+    outline: 10px solid transparent
+    background: var(--md-sys-color-primary)
+    transition: .2s cubic-bezier(0.2, 0, 0, 1)
+
+
+
 div.m3.m3-slider-container
     height: 20px
     display: flex
@@ -6,7 +29,6 @@ div.m3.m3-slider-container
     & > datalist
         display: none
 
-
 input[type="range"].m3.m3-slider
     margin: 0
     appearance: none