CODEWITHSUNDEEP
javascripthtmlcss
rsedlr
rsedlr

Reputation: 100

change colour of a html slider button as it scrolls

here i have my simple slider which i am theoretically going to use to control a stepper motor's movement based on the slider position. I wanted to make the website that it will be hosted on look professional so i have spent a long time trying to figure out how to change the button colour while it scrolls (this is because the motor is controlling my boiler temp so a visual representation of temp would be nice) but my problem is changing the css value. I know to use document.getElementById("myRange") to get the .slider css but i need to target the .slider::-webkit-slider-thumb section as its background is the colour of the button itself. It is proving very hard for me to find a way to reference this as im not too sire what the double colon bit does. I researched to find that :hover and other single colon class references are when a specific condition is met, such as the mouse hovering over, and that a double colon means that the reference doesnt technically exist but can be grabbed for styling? and that its referred to as a pseudo element (i think).

i also came across many examples like this: document.getElementById("testDiv").pseudoStyle("before","color","purple");

And this:

document.styleSheets[0].insertRule('#elid:hover { background-color: red; }', 0); document.styleSheets[0].cssRules[0].style.backgroundColor= 'red';

I tried to adapt this to my own use and did other things like:

    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: document.styleSheets[0].addRule('.slider::-webkit-slider-thumb','background: green');

None of these worked for me, its probaly something very obvious that im doing wrong but i cannot figure it out for the life of me. All i need is a way to change the .slider::-webkit-slider-thumb background value in my code. Thanks to anyone who has any ideas

.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">

Upvotes: 2

Views: 2636

Answers (2)

Scott Marcus
Scott Marcus

Reputation: 65835

To pick up on the solution provided by @guest271314, if you set up an event handler for the input or change events and generate a random color, you can get a dynamic color. You can even store desired colors in an array and extract a random one of those to limit the color palette.

var s = document.getElementById("myRange");

s.addEventListener("input", function(){

  // Generate random color
  
  // Hex:
  //var color = '#'+Math.floor(Math.random()*16777215).toString(16);
  
  // RGB:
  var num = Math.round("0xffffff" * Math.random());
  var r = num >> 16;
  var g = num >> 8 & 255;
  var b = num & 255;
  var color = 'rgb(' + r + ', ' + g + ', ' + b + ')';  
  
  // Loop over the CSS rules in the document's stylesheets
  for (let {cssRules} of document.styleSheets) {
  
    // Loop over the selector and styles of each rule
    for (let {selectorText, style} of cssRules) {
      // Check the selector for a match
      if (selectorText === ".slider::-webkit-slider-thumb") {
        // Update the style:
        style.backgroundColor = color;
      }
    }
  }
});
.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">

Upvotes: 2

guest271314
guest271314

Reputation: 1

You can iterate document.styleSheets, check .cssRules for matching .selectorText and then set the .style of the that CSSStyleRule

for (let {cssRules} of document.styleSheets) {
  for (let {selectorText, style} of cssRules) {
    if (selectorText === ".slider::-webkit-slider-thumb") {
      style.backgroundColor = "green";
    }
  }
}
.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">

Upvotes: 1

Related Questions