.slider{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:linear-gradient(to right,var(--active-color) var(--progress),var(--inactive-color) var(--progress));border-radius:2px;cursor:pointer;height:4px;outline:none;transition:background .2s ease-in-out;width:100%}.dark .slider{--inactive-color:#4b5563}.slider{--inactive-color:#f6f6f6}.slider::-webkit-slider-runnable-track{background:transparent;border-radius:2px;height:4px;width:100%}.slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background:var(--thumb-color);border:2px solid var(--thumb-border-color);border-radius:50%;box-shadow:0 0 4px rgba(0,0,0,.1);cursor:pointer;height:18px;margin-top:-6px;-webkit-transition:transform .2s,background .2s;transition:transform .2s,background .2s;width:18px}.slider::-webkit-slider-thumb:active,.slider::-webkit-slider-thumb:hover{transform:scale(1.2)}.slider::-moz-range-track{background:transparent;border-radius:2px;height:4px;width:100%}.slider::-moz-range-thumb{background:var(--thumb-color);border:2px solid var(--thumb-border-color);border-radius:50%;cursor:pointer;height:18px;-moz-transition:transform .2s,background .2s;transition:transform .2s,background .2s;width:18px}.slider::-moz-range-thumb:active,.slider::-moz-range-thumb:hover{transform:scale(1.2)}.slider::-ms-track{background:transparent;border-color:transparent;color:transparent;height:4px;width:100%}.slider::-ms-fill-lower{background:var(--active-color);border-radius:2px}.slider::-ms-fill-upper{background:var(--inactive-color);border-radius:2px}.slider::-ms-thumb{background:var(--thumb-color);border:2px solid var(--thumb-border-color);border-radius:50%;cursor:pointer;height:18px;-ms-transition:transform .2s,background .2s;transition:transform .2s,background .2s;width:18px}.slider::-ms-thumb:active,.slider::-ms-thumb:hover{transform:scale(1.2)}