Как дать двум ползункам диапазона другой цвет дорожки?

Question

Может ли кто-нибудь объяснить мне, как я могу сделать так, чтобы эти две дорожки-слайдера имели разный цвет?

Очень ценю, так как я вырываю свои волосы из-за чего-то такого, казалось бы, "простого" (извинения, еслия не прав)

input[type=range]::-webkit-slider-runnable-track{
  background-color:red;
}

<input type="range">
'
'
'
<input type="range">

Answer 1

Вы можете назначить различные классы элементам ввода и назначить соответствующие цвета фона. Пожалуйста, обратитесь к фрагменту ниже.

input[type=range].bgRed::-webkit-slider-runnable-track{
  background-color:red;
}
input[type=range].bgBlue::-webkit-slider-runnable-track{
  background-color:blue;
}

<input type="range" class="bgRed">
'
'
'
<input type="range" class="bgBlue">

ВЫХОД:

Answer 2

Попробуйте это CSS

input[type=range]:nth-child(1)::-webkit-slider-runnable-track{
  background-color:red;
}
input[type=range]:nth-child(2)::-webkit-slider-runnable-track{
  background-color:green;
}

ВЫХОД