change colour of a html slider button as it scrolls

Question

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

I'm not too sure, I found a couple of forums that used it to change the style of some pseudo elements but i couldn't get it to work for me. Thanks for the quick response btw :) — rsedlr, Nov 04 '17 at 15:27
Are you trying to apply style for `:hover` pseudo class? What are `r` and `b`? Not certain what issue is? — guest271314, Nov 04 '17 at 15:34
im trying to apply style for `::-webkit-slider-thumb` pseudo class. `r` and `b` are values for the colour i wish to set the `background` to. — rsedlr, Nov 04 '17 at 15:37
Are you trying to fill the background with different colors as it scrolls? Maybe this thread might help you: https://stackoverflow.com/questions/8723633/changing-the-color-of-a-jquery-ui-slider-as-you-slide-it — Adriano Monecchi, Nov 04 '17 at 15:38
im trying to fill the slider button with the different value but for whatever reason the slider button is referred to as the `background` in the `::-webkit-slider-thumb` pseudo class. Thanks for the thread ill look at that now, only thing is im not sure how to use jQuerey and if i have to change my html or css in any way for it to work with the jQuerey? — rsedlr, Nov 04 '17 at 15:45

Scott Marcus · Accepted Answer · 2017-11-07T22:24:36.150

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

Thanks, that is roughly what i was hoping to do. I would upvote your answer but sadly i dont have enough reputation to do that yet. Really appreciate your help! — rsedlr, Nov 04 '17 at 17:14
@ScottMarcus How is the code at your Answer different from the code at https://stackoverflow.com/a/47112487/? — guest271314, Nov 04 '17 at 17:27
@guest271314 It includes an `input` event handler to implement the code and a random HEX color generator. I inferred from the question that these were elements that the OP was looking for. I attributed the bulk of the code in my answer to you (+1) and clearly mentioned what my answer adds to it. — Scott Marcus, Nov 04 '17 at 18:25
@ScottMarcus Sorry to bother you again but i've placed my code on a raspberry pi running apache and now the slider is no longer working. I'm getting the error 'cssRules is not iterable' but your answer seems to say that it is so i must be doing something wrong? Thanks — rsedlr, Dec 02 '17 at 18:07

score 1 · Answer 2 · answered Nov 04 '17 at 15:45

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

Thanks for the answer. I see it works in the code snippet which is great, i also think i understand what you did as your explanation is easy to follow so i should be able to implement it in my code fairly easily, really appreciate the help, thanks — rsedlr, Nov 04 '17 at 15:54

change colour of a html slider button as it scrolls

2 Answers2