.range-slider{--primary-color:var(--grey35);--value-offset-y:var(--ticks-gap);--value-active-color:#fff;--value-background:#37475a;--value-background-hover:#37475a;--fill-color:var(--primary-color);--progress-background:var(--bg-color-grey);--progress-radius:20px;--track-height:calc(var(--thumb-size)/2);--min-max-opacity:0.5;--min-max-x-offset:10%;--thumb-size:16px;--thumb-color:#fff;--thumb-shadow:0 0 3px rgba(0,0,0,.4),0 0 1px rgba(0,0,0,.5) inset,0 0 0 99px var(--thumb-color) inset;--thumb-shadow-active:0 0 0 calc(var(--thumb-size)/4) inset var(--thumb-color),0 0 0 99px var(--primary-color) inset,0 0 3px rgba(0,0,0,.4);--thumb-shadow-hover:var(--thumb-shadow);--ticks-thickness:1px;--ticks-height:5px;--ticks-gap:var(--ticks-height,0);--ticks-color:#fff;--step:1;--ticks-count:Calc(var(--max) - var(--min)) /var(--step);--maxTicksAllowed:30;--too-many-ticks:Min(1,Max(var(--ticks-count) - var(--maxTicksAllowed),0));--x-step:Max(var(--step),var(--too-many-ticks) * (var(--max) - var(--min)));--tickInterval:100/((var(--max) - var(--min))/var(--step)) * var(--tickEvery,1);--tickIntervalPerc:calc((100% - var(--thumb-size))/((var(--max) - var(--min))/var(--x-step))*var(--tickEvery, 1));--value-a:Clamp(var(--min),var(--value,0),var(--max));--value-b:var(--value,0);--text-value-a:var(--text-value,"");--completed-a:calc((var(--value-a) - var(--min))/(var(--max) - var(--min))*100);--completed-b:calc((var(--value-b) - var(--min))/(var(--max) - var(--min))*100);--ca:Min(var(--completed-a),var(--completed-b));--cb:Max(var(--completed-a),var(--completed-b));--thumbs-too-close:Clamp(-1,1000 * (Min(1,Max(var(--cb) - var(--ca) - 5,-1)) + 0.001),1);--thumb-close-to-min:Min(1,Max(var(--ca) - 2,0));--thumb-close-to-max:Min(1,Max(98 - var(--cb),0));background:linear-gradient(to right,var(--ticks-color) var(--ticks-thickness),transparent 1px) repeat-x;background-position-x:calc(var(--thumb-size)/2 - var(--ticks-thickness)/2);background-position-y:var(--flip-y,bottom);background-size:var(--tickIntervalPerc) var(--ticks-height);display:inline-block;height:Max(var(--track-height),var(--thumb-size));padding-bottom:var(--flip-y,var(--ticks-gap));padding-top:calc(var(--flip-y)*var(--ticks-gap));position:relative;z-index:1}.range-slider[data-ticks-position=top]{--flip-y:1}.range-slider:after,.range-slider:before{--offset:calc(var(--thumb-size)/2);bottom:var(--flip-y,-2.5ch);content:counter(x);display:var(--show-min-max,block);opacity:Clamp(0,var(--at-edge),var(--min-max-opacity));pointer-events:none;position:absolute;top:calc(-2.5ch*var(--flip-y));transform:translateX(calc(var(--min-max-x-offset)*var(--before, -1)*-1)) scale(var(--at-edge))}.range-slider:before{--before:1;--at-edge:var(--thumb-close-to-min);counter-reset:x var(--min);display:none;left:var(--offset)}.range-slider:after{--at-edge:var(--thumb-close-to-max);counter-reset:x var(--max);display:none;right:var(--offset)}.range-slider__values{line-height:0;margin:0 auto;pointer-events:none;position:relative;text-align:justify;top:50%;width:100%;z-index:5}.range-slider__values:after{background:red;content:"";display:inline-block;height:0;width:100%}.range-slider__progress{--start-end:calc(var(--thumb-size)/2 - 10px);--clip-end:calc(100% - (var(--cb))*1%);--clip-start:calc(var(--ca)*1%);--clip:inset(-20px var(--clip-end) -20px var(--clip-start));background:var(--progress-background,#eee);border-radius:var(--progress-radius);height:calc(var(--track-height));left:var(--start-end);pointer-events:none;position:absolute;right:var(--start-end);top:calc(var(--ticks-gap)*var(--flip-y, 0) + var(--thumb-size)/2 - var(--track-height)/2);z-index:-1}.range-slider__progress:before{background:var(--fill-color,#000);box-shadow:var(--progress-flll-shadow);clip-path:var(--clip);z-index:1}.range-slider__progress:after,.range-slider__progress:before{border-radius:inherit;bottom:0;content:"";left:0;position:absolute;right:0;top:0}.range-slider__progress:after{box-shadow:var(--progress-shadow);pointer-events:none}.range-slider>input{-webkit-appearance:none;background:none;cursor:-webkit-grab;cursor:grab;height:var(--thumb-size);left:0;margin:0;outline:none;position:absolute;top:calc(50% - Max(var(--track-height), var(--thumb-size))/2 + var(--ticks-gap)/2*var(--flip-y, 0));width:100%}.range-slider>input:not(:only-of-type){pointer-events:none}.range-slider>input::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;background:var(--thumb-color);border:none;border-radius:var(--thumb-radius,50%);box-shadow:var(--thumb-shadow);height:var(--thumb-size);pointer-events:auto;transform:var(--thumb-transform);transition:.1s;width:var(--thumb-size)}.range-slider>input::-moz-range-thumb{appearance:none;-webkit-appearance:none;background:var(--thumb-color);border:none;border-radius:var(--thumb-radius,50%);box-shadow:var(--thumb-shadow);height:var(--thumb-size);pointer-events:auto;transform:var(--thumb-transform);transition:.1s;width:var(--thumb-size)}.range-slider>input::-ms-thumb{appearance:none;-webkit-appearance:none;background:var(--thumb-color);border:none;border-radius:var(--thumb-radius,50%);box-shadow:var(--thumb-shadow);height:var(--thumb-size);pointer-events:auto;transform:var(--thumb-transform);transition:.1s;width:var(--thumb-size)}.range-slider>input:focus,.range-slider>input:hover{--thumb-shadow:var(--thumb-shadow-hover)}.range-slider>input:focus+output,.range-slider>input:hover+output{--value-background:var(--value-background-hover);--y-offset:-5px;color:var(--value-active-color)}.range-slider>input:active{--thumb-shadow:var(--thumb-shadow-active);cursor:grabbing;z-index:2}.range-slider>input+output{transition:0s}.range-slider>input:first-of-type{--is-left-most:Clamp(0,(var(--value-a) - var(--value-b)) * 99999,1)}.range-slider>input:first-of-type+output:not(:only-of-type){--flip:calc(var(--thumbs-too-close)*-1)}.range-slider>input:first-of-type+output{--value:var(--value-a);--x-offset:calc(var(--completed-a)*-1%)}.range-slider>input:first-of-type+output:after{content:var(--prefix,"") var(--text-value-a) var(--suffix,"")}.range-slider>input:nth-of-type(2){--is-left-most:Clamp(0,(var(--value-b) - var(--value-a)) * 99999,1)}.range-slider>input:nth-of-type(2)+output{--value:var(--value-b)}.range-slider>input:only-of-type~.range-slider__progress{--clip-start:0}.range-slider>input+output{--flip:-1;--x-offset:calc(var(--completed-b)*-1%);--pos:calc((var(--value) - var(--min))/(var(--max) - var(--min))*100%);background:var(--value-background);border-radius:3px;color:#fff;font-size:10px;font-weight:700;left:var(--pos);padding:1px 4px;pointer-events:none;position:absolute;transform:translate(var(--x-offset),calc(150%*var(--flip) - (var(--y-offset, 0px) + var(--value-offset-y))*var(--flip)));transition:all .12s ease-out,left 0s;z-index:5}.range-slider>input+output:after{content:var(--prefix,"") var(--text-value-b) var(--suffix,"")}.range-slider{min-width:200px;width:Clamp(300px,100%,100%)}