input[type=range]{-webkit-appearance:none;appearance:none;width:100%;background:transparent}input[type=range]::-webkit-slider-runnable-track{width:100%;height:4px;background:var(--color-outline);border-radius:4px}input[type=range]::-moz-range-track{width:100%;height:4px;background:var(--color-outline);border-radius:4px}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;background:var(--color-primary);border-radius:50%;margin-top:-8px;box-shadow:0 2px 4px rgba(0,0,0,.2);cursor:pointer}input[type=range]::-moz-range-thumb{width:20px;height:20px;background:var(--color-primary);border-radius:50%;box-shadow:0 2px 4px rgba(0,0,0,.2);cursor:pointer}input[type=range]::-webkit-slider-runnable-track{background:linear-gradient(to right,var(--color-primary) 0,var(--color-primary) calc((var(--value) / var(--max)) * 100%),var(--color-outline) calc((var(--value) / var(--max)) * 100%),var(--color-outline) 100%)}input[type=range]::-moz-range-progress{background:var(--color-primary);height:4px;border-radius:4px}