я бы использовал css с id и :: - webkit-slider-thumb это свойство.
в собственности есть box-shadow.
попробуйте просто вставить ниже.
box-shadow: -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 */
}