gmx.css/src/_slider.css

A micro Material Design 3 based CSS-only framework.

.slider {
    display: block;
    position: relative;
    height: 2.75rem;
    min-width: 10rem;
}

.slider input {
    position: absolute;
    left: -.5rem;
    right: -.5rem;
    width: calc(100% + 1rem);
    height: 100%;
    opacity: 0;
    appearance: none;
    margin: 0;
    cursor: pointer;
}

.slider input:active~.thumb {
    width: .125rem;
}

.slider .track::before {
    position: absolute;
    content: " ";
    left: 0;
    top: 50%;
    translate: 0 -50%;
    width: calc(var(--percent) - .375rem);
    height: 1rem;
    pointer-events: none;
    background: var(--m3-scheme-primary);
    border-start-start-radius: var(--m3-slider-track-out-shape);
    border-end-start-radius: var(--m3-slider-track-out-shape);
    border-start-end-radius: var(--m3-slider-track-in-shape);
    border-end-end-radius: var(--m3-slider-track-in-shape);
}

.slider .track::after {
    position: absolute;
    content: " ";
    right: 0;
    top: 50%;
    translate: 0 -50%;
    width: calc(100% - var(--percent) - .375rem);
    height: 1rem;
    pointer-events: none;
    background: var(--m3-scheme-primary-container);
    border-start-start-radius: var(--m3-slider-track-in-shape);
    border-end-start-radius: var(--m3-slider-track-in-shape);
    border-start-end-radius: var(--m3-slider-track-out-shape);
    border-end-end-radius: var(--m3-slider-track-out-shape);
}

.slider .thumb {
    position: absolute;
    left: var(--percent);
    translate: -50% 0;
    width: .25rem;
    height: 2.75rem;
    border-radius: 1.25rem;
    background: var(--m3-scheme-primary);
    pointer-events: none;
    transition: width .2s;
}

.slider .tooltip {
    position: absolute;
    background: var(--m3-scheme-inverse-surface);
    color: var(--m3-scheme-inverse-on-surface);
    width: 3rem;
    text-align: center;
    padding: .65rem 0;
    font-weight: 500;
    font-size: .875rem;
    border-radius: var(--m3-slider-thumb-shape);
    left: var(--percent);
    top: -3rem;
    translate: -50% 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s;
}

.slider:hover .tooltip {
    opacity: 1;
}