Блог

Я новичок в веб-программировании, поэтому этот вопрос будет простым для большинства из вас.

У меня есть 3 ползунка диапазона, и я хочу установить для каждого из них свой цвет (красный, зеленый и синий), так каков наилучший способ установить цвет. Используя тело при загрузке, по идентификатору или любым другим способом?

Демонстрация здесь https://codepen.io/fast7027/pen/zXLOem

 <div class="btn-row">
                          <input type="range" min="0" max="100" value="65" id="rangeR">
                        </div>
                        <div class="btn-row">
                          <input type="range" min="0" max="100" value="65" id="rangeG">
                        </div>
                        <div class="btn-row">
                          <input type="range" min="0" max="100" value="65" id="rangeB">
                        </div>
  

я бы использовал css с идентификатором и ::-webkit-slider-thumb это свойство.

в свойстве есть поле-тень.

попробуйте просто вставить ниже.

окно-тень: -100vw 0 0 100vw #007aff;

#007aff синий, но если вы используете его со своим идентификатором, вы можете изменить ползунок, какой цвет вы хотите.

пример в вашем css,

 #rangeR::-webkit-slider-thumb   {
  box-shadow: -100vw 0 0 100vw Red;
}
#rangeG::-webkit-slider-thumb   {
  box-shadow: -100vw 0 0 100vw Green;
}
#rangeB::-webkit-slider-thumb   {
  box-shadow: -100vw 0 0 100vw Blue;
}
::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 20px; /* 1 */
    height: 20px;
    background: #fff;
    border: 2px solid #999; /* 1 */
}