range-slider.min.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 input::-webkit-slider-runnable-track,range-slider::before{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 .2s 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:active::-webkit-slider-thumb,range-slider input:focus::-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 .2s;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:0 0!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)}}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{inset-area:top;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 / .04)) drop-shadow(0 2px 3px rgb(0 0 0 / .1));padding:.1em .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:0;height:0;border-style:solid;border-width:.27em .27em 0 .27em;border-color:rgb(var(--value-bg)) transparent transparent transparent}