range-slider.css

range-slider {
    --thumb-width: 16px;
    --thumb-height: var(--thumb-width);
    --thumb-mobile-scale: 1.4;
    --thumb-mobile-width: calc(var(--thumb-width) * var(--thumb-mobile-scale));
    --thumb-mobile-height: calc(var(--thumb-height) * var(--thumb-mobile-scale));
    --thumb-border: 1px solid #fff;
    --thumb-border-radius: 999px;
    --thumb-bg: 10 89 254;
    --thumb-mobile-scale: 1.4;
    --track-height: 4px;
    --track-border-radius: var(--thumb-border-radius);
    --track-bg: 234 234 234;
    --value-font-size: inherit;
    --value-color: 40 40 40;
    --value-bg: 255 255 255;
    --value-border-radius: 3px;

    position: relative;
    display: inline-block;
}
range-slider input {
    margin: 0;
    width: 100%;
    -webkit-appearance: none;
}
range-slider input:focus {
    outline: 0;
}
range-slider::before,
range-slider input::-webkit-slider-runnable-track {
    background: rgb(var(--track-bg));
    height: var(--track-height);
    border-radius: var(--track-border-radius);
}
range-slider input::-webkit-slider-thumb {
    -webkit-appearance: none;
    cursor: pointer;
    background: rgba(var(--thumb-bg) / .9);
    border: var(--thumb-border);
    border-radius: var(--thumb-border-radius);
    height: var(--thumb-height);
    width: var(--thumb-width);
    margin-top: calc(var(--track-height) / 2 - var(--thumb-height) / 2);
    transition: box-shadow 200ms ease-out;
}
@media (pointer:coarse) {
    range-slider input::-webkit-slider-thumb {
        --thumb-height: var(--thumb-mobile-height);
        --thumb-width: var(--thumb-mobile-width);
    }
}
range-slider input:focus::-webkit-slider-thumb,
range-slider input:active::-webkit-slider-thumb {
    box-shadow: 0 0 0 3px rgba(var(--thumb-bg) / .2);
}
range-slider input::-moz-range-thumb {
    -webkit-appearance: none;
    cursor: pointer;
    background: rgba(var(--thumb-bg) / .9);
    border: var(--thumb-border);
    border-radius: var(--thumb-border-radius);
    height: var(--thumb-height);
    width: var(--thumb-width);
    margin-top: calc(var(--track-height) / 2 - var(--thumb-height) / 2);
    transition: box-shadow 200ms;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
range-slider input:focus::-moz-range-thumb {
    box-shadow: 0 0 0 3px rgba(var(--thumb-bg) / .2);
}
range-slider .filler {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}
range-slider .range {
    position: absolute;
    left: 0;
    top: 50%;
    height: 0 !important;
    overflow: visible;
}
range-slider .range::-webkit-slider-thumb {
    position: relative;
    z-index: 2;
}
range-slider .range:first-child::-webkit-slider-thumb {
    z-index: 3;
}

@-moz-document url-prefix() {
    range-slider .range::-moz-range-track {
        background: transparent !important;
    }
    range-slider::before {
        content: '';
        width: 100%;
        position: absolute;
        top: calc(50% - var(--track-height) / 2);
    }
    range-slider .range {
        top: calc(50% + 20px);
    }
    range-slider .range::-moz-range-thumb {
        transform: translateY(-20px);
    }
}

/* Tooltip */
range-slider :nth-child(1 of input)::-webkit-slider-thumb {
    anchor-name: --range-slider-thumb-1;
}
range-slider :nth-child(2 of input)::-webkit-slider-thumb {
    anchor-name: --range-slider-thumb-2;
}
range-slider :nth-child(1 of output) {
    position-anchor: --range-slider-thumb-1;
}
range-slider :nth-child(2 of output) {
    position-anchor: --range-slider-thumb-2;
}
range-slider output {
    position-area: top;
    inset: 0 -5em;
    display: none;
    margin-bottom: .3em;
    position: absolute;
    z-index: 4;
    text-align: center;
    color: rgb(var(--value-color));
    background: rgb(var(--value-bg));
    border-radius: var(--value-border-radius);
    font-size: var(--value-font-size);
    filter: drop-shadow(0 4px 8px rgb(0 0 0 / 0.04)) drop-shadow(0 2px 3px rgb(0 0 0 / 0.1));
    padding: 0.1em 0.3em;
    min-width: 1.5em;
}
@supports(anchor-name: --name) {
    range-slider output {
        display: block;
    }
}
range-slider:has(:nth-child(1 of input):focus) :nth-child(1 of output),
range-slider:has(:nth-child(2 of input):focus) :nth-child(2 of output) {
    z-index: 5;
}
range-slider:has(:nth-child(1 of input):hover) :nth-child(1 of output),
range-slider:has(:nth-child(2 of input):hover) :nth-child(2 of output) {
    z-index: 6;
}
range-slider output::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: .27em .27em 0 .27em;
    border-color: rgb(var(--value-bg)) transparent transparent transparent;
}