.range-slider{--dif:calc(var(--max) - var(--min));display:grid;grid-template:repeat(2,max-content) 1em/1fr 1fr;overflow:hidden;position:relative;margin:1em auto 0;width:100%;height:22px}.range-slider input[type=range]{grid-column:1/span 2;grid-row:3;z-index:1;top:0;left:0;margin:0;background:0 0;color:#000;pointer-events:none}.range-slider input[type=range]:focus{z-index:2}.range-slider input[type=range]:focus,.range-slider input[type=range]:focus+output{color:#0068d1}.range-slider input[type=range],.range-slider input[type=range]::-webkit-slider-runnable-track,.range-slider input[type=range]::-webkit-slider-thumb{-webkit-appearance:none}.range-slider input[type=range]::-webkit-slider-runnable-track{width:100%;height:100%;background:0 0}.range-slider input[type=range]::-moz-range-track{width:100%;height:100%;background:0 0}.range-slider input[type=range]::-webkit-slider-thumb{border:none;width:10px;height:22px;border-radius:0;background:currentcolor;pointer-events:auto;cursor:pointer}.range-slider input[type=range]::-moz-range-thumb{border:none;width:10px;height:22px;border-radius:0;background:currentcolor;pointer-events:auto;cursor:pointer}.range-slider:before{content:"";position:absolute;top:7px;left:0;right:0;height:8px;border:solid 1px #d7d9db;background:#fff}.range-slider::after{content:"";grid-column:1/span 2;grid-row:3;height:8px;background:#d1d1d1;z-index:0;margin-top:7px;margin-left:calc((var(--value-1) - var(--min))/ var(--dif) * 100%);width:calc((var(--value-2) - var(--value-1))/ var(--dif) * 100%)}