input[type=range]{-webkit-appearance:none;background:0 0;border:0;color:#30d565;display:block;height:20px;margin:0;padding:0;width:100%}input[type=range]::-webkit-slider-runnable-track{background-color:rgba(255,255,255,.1);border:0;border-radius:3px;height:6px;transition:all .3s ease;-webkit-user-select:none;user-select:none;background-image:linear-gradient(to right,currentColor var(--value),transparent var(--value))}input[type=range]::-webkit-slider-thumb{background:#fff;border:0;border-radius:100%;box-shadow:0 1px 1px rgba(52,63,74,.15),0 0 0 1px rgba(52,63,74,.2);box-sizing:border-box;height:14px;position:relative;transition:all .2s ease;width:14px;-webkit-appearance:none;margin-top:-4px}input[type=range]::-moz-range-track{background-color:rgba(255,255,255,.1);border:0;border-radius:3px;height:6px;transition:all .3s ease;-moz-user-select:none;user-select:none}input[type=range]::-moz-range-thumb{background:#fff;border:0;border-radius:100%;box-shadow:0 1px 1px rgba(52,63,74,.15),0 0 0 1px rgba(52,63,74,.2);box-sizing:border-box;height:14px;position:relative;transition:all .2s ease;width:14px}input[type=range]::-moz-range-progress{background:currentColor;border-radius:3px;height:6px}input[type=range]::-ms-track{background:0 0;border:0;color:transparent;height:6px}input[type=range]::-ms-fill-lower,input[type=range]::-ms-fill-upper{background-color:rgba(255,255,255,.1);border:0;border-radius:3px;height:6px;transition:all .3s ease;-ms-user-select:none;user-select:none}input[type=range]::-ms-thumb{background:#fff;border:0;border-radius:100%;box-shadow:0 1px 1px rgba(52,63,74,.15),0 0 0 1px rgba(52,63,74,.2);box-sizing:border-box;height:14px;position:relative;transition:all .2s ease;width:14px;margin-top:0}input[type=range]::-ms-tooltip{display:none}input[type=range]::-ms-fill-lower{background:currentColor}input[type=range]:focus{outline:0}input[type=range]::-moz-focus-outer{border:0}input[type=range].tab-focus{outline-offset:3px}input[type=range]:active::-webkit-slider-thumb{box-shadow:0 1px 1px rgba(52,63,74,.15),0 0 0 1px rgba(52,63,74,.2),0 0 0 3px rgba(255,255,255,.5)}input[type=range]:active::-moz-range-thumb{box-shadow:0 1px 1px rgba(52,63,74,.15),0 0 0 1px rgba(52,63,74,.2),0 0 0 3px rgba(255,255,255,.5)}input[type=range]:active::-ms-thumb{box-shadow:0 1px 1px rgba(52,63,74,.15),0 0 0 1px rgba(52,63,74,.2),0 0 0 3px rgba(255,255,255,.5)}*,::after,::before{box-sizing:border-box}html{align-items:center;display:flex;height:100%}body{background:#343f4a;margin:auto;max-width:480px;padding:20px;width:100%}input[type=range]{margin:20px 0}