input[type=range]{--track-height:8px;--thumb-size:12px;--thumb-color:#10b981;--track-color-filled:#10b981;--track-color-empty:#d1d5db;--thumb-shadow-color:#10b98166;appearance:none;width:100%;height:var(--track-height);cursor:pointer;background:0 0}input[type=range]::-webkit-slider-thumb{appearance:none;width:var(--thumb-size);height:var(--thumb-size);background:var(--thumb-color);box-shadow:0 0 0 3px var(--thumb-shadow-color);margin-top:calc(var(--thumb-size)/2*-1 - var(--track-height)/2*-1);border-radius:50%}input[type=range]::-moz-range-thumb{width:var(--thumb-size);height:var(--thumb-size);background:var(--thumb-color);box-shadow:0 0 0 3px var(--thumb-shadow-color);border-radius:50%}input[type=range]::-ms-thumb{width:var(--thumb-size);height:var(--thumb-size);background:var(--thumb-color);box-shadow:0 0 0 3px var(--thumb-shadow-color);border-radius:50%}input[type=range]::-webkit-slider-runnable-track{width:100%;height:var(--track-height);border-radius:var(--track-height);background:linear-gradient(to right,var(--track-color-filled) var(--range-progress),var(--track-color-empty) var(--range-progress))}input[type=range]::-moz-range-track{width:100%;height:var(--track-height);border-radius:var(--track-height);background:linear-gradient(to right,var(--track-color-filled) var(--range-progress),var(--track-color-empty) var(--range-progress))}input[type=range]::-ms-track{width:100%;height:var(--track-height);color:#0000;background:0 0;border-color:#0000}input[type=range]::-ms-fill-lower{background:var(--track-color-filled);border-radius:var(--track-height)}input[type=range]::-ms-fill-upper{background:var(--track-color-empty);border-radius:var(--track-height)}