.range{--primaryColor: #0366D6;--value-active-color: white;--value-background: white;--value-font: 700 12px/1 Arial;--progress-color: #EEE;--progress-shadow: 2px 2px 4px rgba(0,0,0, .1) inset;--fill-color: var(--primaryColor);--thumb-size: 16px;--track-height: calc(var(--thumb-size)/2);--thumb-shadow: 0 0 3px rgba(0,0,0,.2);--ticks-thickness: 1px;--ticks-height: 5px;--ticks-color: silver;--step: 1;--ticks-count: (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));--completed: calc((var(--value) - var(--min) ) / (var(--max) - var(--min)) * 100);--LTR: 1;display:inline-block;height:Max(var(--track-height), var(--thumb-size));background:linear-gradient(to right, var(--ticks-color) var(--ticks-thickness), transparent 1px) repeat-x;background-size:var(--tickIntervalPerc) var(--ticks-height);background-position-x:calc(var(--thumb-size)/2);background-position-y:var(--flip-y, bottom);position:relative;z-index:1;padding-bottom:var(--flip-y, var(--ticks-height));padding-top:calc(var(--flip-y) * var(--ticks-height))}[dir="rtl"] .range{--LTR: -1}.range[data-ticks-position='top']{--flip-y: 1}.range::before,.range::after{--offset: calc(var(--thumb-size)/2);content:counter(x);font:12px Arial;position:absolute;bottom:var(--flip-y, -2.5ch);top:calc(-2.5ch * var(--flip-y));opacity:var(--min-max-opacity, 0.5);pointer-events:none}.range::before{counter-reset:x var(--min);left:var(--offset);transform:translateX(calc(-50% * var(--LTR)))}[dir='rtl'] .range::before{left:auto;right:var(--offset)}.range::after{counter-reset:x var(--max);right:var(--offset);transform:translateX(calc(50% * var(--LTR)))}[dir='rtl'] .range::after{right:auto;left:var(--offset)}.range__progress{position:absolute;left:0;top:calc(50% - var(--ticks-height)/2);transform:var(--flip-y, translateY(-50%) translateZ(0));width:100%;height:calc(var(--track-height));pointer-events:none;z-index:-1;box-shadow:var(--progress-shadow);border-radius:20px;background:var(--fill-color, white)}.range__progress::after{content:'';display:block;margin-left:auto;margin-right:-1px;width:calc((100% - var(--completed) * 1%) + (var(--completed)/100) * var(--thumb-size));height:100%;background:var(--progress-color, #EEE);box-shadow:inherit;border-radius:0 20px 20px 0}[dir="rtl"] .range__progress::after{margin-right:auto;margin-left:-1px;border-radius:20px 0 0 20px}.range>input{-webkit-appearance:none;width:100%;height:var(--thumb-size);margin:0;cursor:-webkit-grab;cursor:grab;outline:none;background:none}.range>input::-webkit-slider-thumb{appearance:none;height:var(--thumb-size);width:var(--thumb-size);border-radius:50%;background:var(--thumb-color, white);border:1px solid silver;box-shadow:var(--inner-shadow, 0 0),var(--thumb-shadow)}.range>input::-moz-slider-thumb{appearance:none;height:var(--thumb-size);width:var(--thumb-size);border-radius:50%;background:var(--thumb-color, white);border:1px solid silver;box-shadow:var(--inner-shadow, 0 0),var(--thumb-shadow)}.range>input::-ms-thumb{appearance:none;height:var(--thumb-size);width:var(--thumb-size);border-radius:50%;background:var(--thumb-color, white);border:1px solid silver;box-shadow:var(--inner-shadow, 0 0),var(--thumb-shadow)}.range>input:active{cursor:grabbing;--thumb-color: var(--fill-color);--inner-shadow: 0 0 0 calc(var(--thumb-size)/4) inset white}.range>input:active+output{transition:0s}.range>input:hover+output{--value-background: var(--primaryColor);color:var(--value-active-color);transform:translate(var(--x-offset), 0);box-shadow:0 0 0 3px var(--value-background)}.range>output{--x-offset: calc(var(--completed) * -1% * var(--LTR));--pos: calc(((var(--value) - var(--min))/(var(--max) - var(--min))) * 100%);pointer-events:none;position:absolute;z-index:5;background:var(--value-background);border-radius:10px;padding:0 4px;top:-3ch;left:var(--pos);transform:translate(var(--x-offset), 6px);transition:all .12s ease-out, left 0s, top 0s}[dir='rtl'] .range>output{left:auto;right:var(--pos)}.range>output::after{content:var(--text-value);font:var(--value-font)}