In my setup, I have a straightforward slider that I plan to use for controlling the movement of a stepper motor based on the slider's position. I wanted to give the website where this will be hosted a professional look, so I've spent quite some time trying to figure out how to change the button color as it moves (given that the motor controls my boiler temperature, having a visual representation of the temperature would be neat). However, I'm facing a challenge in changing the CSS value. I understand that I can use
document.getElementById("myRange").slider CSS, but my issue lies in targeting the .slider::-webkit-slider-thumb section, since its background determines the color of the button itself. It's proven challenging for me to reference this because I'm unsure of what the double colon signifies. From my research, I gathered that :hover and other single colon class references apply when a specific condition is met (like hovering over with the mouse), while the double colon suggests that the reference may not technically exist but can be utilized for styling - referred to as a pseudo element, I believe.
I stumbled upon examples like:
document.getElementById("testDiv").pseudoStyle("before","color","purple");And also:
document.styleSheets[0].insertRule('#elid:hover { background-color: red; }', 0);
document.styleSheets[0].cssRules[0].style.backgroundColor= 'red';In an attempt to adapt these examples into my own project, I tried things like this:
var sliderButton = document.getElementById("myRange");
sliderButton.pseudoStyle("::-webkit-slider-thumb","background",rgb(r, 0, b));
//where r and b are predefined values between 0 and 255
And also:
document.styleSheets[0].addRule('.slider::-webkit-slider-thumb','background: green');Unfortunately, none of these methods worked for me. It's likely something very obvious that I'm missing, but for the life of me, I can't seem to figure it out. All I really need is a way to modify the .slider::-webkit-slider-thumb background value within my code. Any help or ideas would be greatly appreciated.
.slider {
-webkit-appearance: none;
width: 100%;
height: 15px;
border-radius: 5px;
background: #c6c6c6;
outline: none;
opacity: 0.7;
-webkit-transition: .3s;
transition: opacity .3s;
}
.slider:hover {
opacity: 1;
background: grey;
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 25px;
height: 25px;
border-radius: 50%;
background: red;
cursor: pointer;
}
.slider::-moz-range-thumb {
width: 25px;
height: 25px;
border-radius: 50%;
background: #4CAF50;
cursor: pointer;
}<input type="range" min="1" max="100" value="50" class="slider" id="myRange">