Стилизовать input type=range перед ползунком

Здравствуйте! Есть такие стили для слайдера:
input[type=range] {-webkit-appearance: none; margin: 5.8px 0; background-color: transparent !important;} input[type=range]:focus {outline: none;} input[type=range]::-webkit-slider-runnable-track {cursor: pointer; box-shadow: 2.4px 2.4px 6.2px rgba(7, 7, 163, 0.72), 0px 0px 2.4px rgba(8, 8, 187, 0.72); background: #ac62ff; border-radius: 21.6px; border: 1px solid rgba(163, 0, 255, 0.79);} input[type=range]::-webkit-slider-thumb {box-shadow: 2.4px 2.4px 9.5px rgba(4, 16, 14, 0.78), 0px 0px 2.4px rgba(9, 36, 32, 0.78); border: 1.8px solid rgba(0, 0, 6, 0.77); border-radius: 28px; background: #ffff29; cursor: pointer; -webkit-appearance: none; margin-top: -7.8px;} input[type=range]:focus::-webkit-slider-runnable-track {background: #b16cff;} input[type=range]::-moz-range-track {width: 100%; cursor: pointer; box-shadow: 2.4px 2.4px 6.2px rgba(7, 7, 163, 0.72), 0px 0px 2.4px rgba(8, 8, 187, 0.72); background: #ac62ff; border-radius: 21.6px; border: 1px solid rgba(163, 0, 255, 0.79);} input[type=range]::-moz-range-thumb {box-shadow: 2.4px 2.4px 9.5px rgba(4, 16, 14, 0.78), 0px 0px 2.4px rgba(9, 36, 32, 0.78); border: 1.8px solid rgba(0, 0, 6, 0.77); border-radius: 28px; background: #ffff29; cursor: pointer;} input[type=range]::-ms-track {width: 100%; cursor: pointer; background: transparent; border-color: transparent; color: transparent;} input[type=range]::-ms-fill-lower {background: #a758ff; border: 1px solid rgba(163, 0, 255, 0.79); border-radius: 43.2px; box-shadow: 2.4px 2.4px 6.2px rgba(7, 7, 163, 0.72), 0px 0px 2.4px rgba(8, 8, 187, 0.72);} input[type=range]::-ms-fill-upper {background: #ac62ff; border: 1px solid rgba(163, 0, 255, 0.79); border-radius: 43.2px; box-shadow: 2.4px 2.4px 6.2px rgba(7, 7, 163, 0.72), 0px 0px 2.4px rgba(8, 8, 187, 0.72);} input[type=range]::-ms-thumb {box-shadow: 2.4px 2.4px 9.5px rgba(4, 16, 14, 0.78), 0px 0px 2.4px rgba(9, 36, 32, 0.78); border: 1.8px solid rgba(0, 0, 6, 0.77); border-radius: 28px; background: #ffff29; cursor: pointer;} input[type=range]:focus::-ms-fill-lower {background: #ac62ff;} input[type=range]:focus::-ms-fill-upper {background: #b16cff;} /* Track */ input[type=range]::-webkit-slider-runnable-track {height: 6.4px;} input[type=range]::-moz-range-track {height: 6.4px;} input[type=range]::-ms-track {height: 6.4px;} /* Thumb */ input[type=range]::-webkit-slider-thumb {height: 20px; width: 8px;} input[type=range]::-moz-range-thumb {height: 20px; width: 8px;} input[type=range]::-ms-thumb {height: 20px; width: 8px;
Моя задача – поменять цвет слайдера перед тумблером. Как это сделать?
Если не понятно, то могу привести пример.

Ответ

Вот пример стилей где цвета до и после ползунка различаются:
input[type='range'] { overflow: hidden; width: 80px; -webkit-appearance: none; background-color: #9a905d; } input[type='range']::-webkit-slider-runnable-track { height: 10px; -webkit-appearance: none; color: #13bba4; margin-top: -1px; } input[type='range']::-webkit-slider-thumb { width: 10px; -webkit-appearance: none; height: 10px; cursor: ew-resize; background: #434343; box-shadow: -80px 0 0 80px #43e5f7; } input[type="range"]::-moz-range-progress { background-color: #43e5f7; } input[type="range"]::-moz-range-track { background-color: #9a905d; } input[type="range"]::-ms-fill-lower { background-color: #43e5f7; } input[type="range"]::-ms-fill-upper { background-color: #9a905d; }