div.m3.m3-slider-container
    height: 20px
    display: flex
    align-items: center

    & > datalist
        display: none


input[type="range"].m3.m3-slider
    margin: 0
    appearance: none
    border-radius: 2px
    margin-inline: 8px
    background: var(--md-sys-color-surface-container-highest)

    &:-moz-any(&)
        height: 4px

    &:-webkit-any(&)
        background: linear-gradient(to right, var(--md-sys-color-primary) 0%, var(--md-sys-color-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: var(--md-sys-color-primary)

    &::-moz-range-thumb
        @include input-range-thumb-mixin

        border: none

    &::-webkit-slider-container
        appearance: none
        box-shadow: none
        border-radius: 2px
        min-block-size: 4px
        height: 4px

    &::-webkit-slider-runnable-track
        height: 20px

    &::-webkit-slider-thumb
        @include input-range-thumb-mixin



