input[type=range]{--track-height:.5rem;--thumb-size:1.25rem;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:#e5e7eb;border-radius:.25rem;cursor:pointer;height:var(--track-height);margin:0;width:100%}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#3b82f6;border:2px solid #fff;border-radius:50%;box-shadow:0 1px 3px #0000001a;cursor:pointer;height:var(--thumb-size);margin-top:calc((var(--thumb-size) - var(--track-height))/-2);width:var(--thumb-size)}input[type=range]::-moz-range-thumb{background:#3b82f6;border:2px solid #fff;border-radius:50%;box-shadow:0 1px 3px #0000001a;cursor:pointer;height:var(--thumb-size);width:var(--thumb-size)}input[type=range]::-webkit-slider-runnable-track{background:linear-gradient(to right,#3b82f6 var(--value,50%),#e5e7eb var(--value,50%));border-radius:.25rem;cursor:pointer;height:var(--track-height);width:100%}input[type=range]::-moz-range-track{background:linear-gradient(to right,#3b82f6 var(--value,50%),#e5e7eb var(--value,50%));border-radius:.25rem;cursor:pointer;height:var(--track-height);width:100%}input[type=range]:active::-webkit-slider-thumb{transform:scale(1.1)}input[type=range]:active::-moz-range-thumb{transform:scale(1.1)}input[type=range]:focus{outline:none}input[type=range]:focus::-webkit-slider-thumb{box-shadow:0 0 0 3px #3b82f633}input[type=range]:focus::-moz-range-thumb{box-shadow:0 0 0 3px #3b82f633}