input[type=range] { -webkit-appearance: none; width: 100%; margin: 8.4px 0; } input[type=range]:focus { outline: none; } input[type=range]::-webkit-slider-runnable-track { width: 100%; height: 3.2px; cursor: pointer; box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; background: #097479; border-radius: 1.3px; border: 0.2px solid #010101; } input[type=range]::-webkit-slider-thumb { box-shadow: 0.6px 0.6px 2.8px #000000, 0px 0px 0.6px #0d0d0d; border: 0.4px solid #000000; height: 20px; width: 20px; border-radius: 50px; background: #0eb8c0; cursor: pointer; -webkit-appearance: none; margin-top: -8.6px; } input[type=range]:focus::-webkit-slider-runnable-track { background: #0eb4bb; } input[type=range]::-moz-range-track { width: 100%; height: 3.2px; cursor: pointer; box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; background: #097479; border-radius: 1.3px; border: 0.2px solid #010101; } input[type=range]::-moz-range-thumb { box-shadow: 0.6px 0.6px 2.8px #000000, 0px 0px 0.6px #0d0d0d; border: 0.4px solid #000000; height: 20px; width: 20px; border-radius: 50px; background: #0eb8c0; cursor: pointer; } input[type=range]::-ms-track { width: 100%; height: 3.2px; cursor: pointer; background: transparent; border-color: transparent; color: transparent; } input[type=range]::-ms-fill-lower { background: #043437; border: 0.2px solid #010101; border-radius: 2.6px; box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; } input[type=range]::-ms-fill-upper { background: #097479; border: 0.2px solid #010101; border-radius: 2.6px; box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; } input[type=range]::-ms-thumb { box-shadow: 0.6px 0.6px 2.8px #000000, 0px 0px 0.6px #0d0d0d; border: 0.4px solid #000000; height: 20px; width: 20px; border-radius: 50px; background: #0eb8c0; cursor: pointer; height: 3.2px; } input[type=range]:focus::-ms-fill-lower { background: #097479; } input[type=range]:focus::-ms-fill-upper { background: #0eb4bb; }