Как изменить цвет в инпуте?

Question

[ksurg]

Добрый день.
Хотел бы узнать, как в range инпуте сделать заполнение цветом.
То есть как тут идет заполнение зеленым.

Вот тот код который есть.

Все заранее спасибо!

Comments

[Сергей delphinpro]

По ссылке на кодпене есть весь необходимый код.

[ksurg]

А что там нужно изменить?

[twobomb]

ksurg, Используйте css after, before

[ksurg]

А после чего ставить?

[Ankhena]

ksurg, Включите аналитику.
Есть готовый код к примеру, который вам нравится. Нужное поведение у зеленого цвета. Выясняете что это за цвет и смотрите где он участвует в коде. Копируете или делаете аналогично.

Answer 1

[Игорь Стасюк]

научитесь дебажить сами

input[type="range"]::-webkit-slider-thumb:after {
content: "";
position: absolute;
z-index: 1;
left: -285px;
top: -28px;
width: 300px;
height: 140px;
background: #9FE472;
transform: rotateX(90deg);
transform-origin: 0 0px 0;
transform: rotateX(90deg) translateY(-140px) translateZ(-18px);
}

дело в background