title: change colour of a html slider button as it scrolls
body: <p>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 <code>document.getElementById("myRange")</code>  to get the <code>.slider</code> css but i need to target the <code>.slider::-webkit-slider-thumb</code> section as its <code>background</code> 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 <code>:hover</code> 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). </p>
  
  <p>i also came across many examples like this:
  <code>document.getElementById("testDiv").pseudoStyle("before","color","purple");</code></p>
  
  <p>And this: </p>
  
  <p><code>document.styleSheets[0].insertRule('#elid:hover { background-color: red; }', 0);
  document.styleSheets[0].cssRules[0].style.backgroundColor= 'red';</code></p>
  
  <p>I tried to adapt this to my own use and did other things like:</p>
  
  <pre><code>    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
  </code></pre>
  
  <p>And:
  <code>document.styleSheets[0].addRule('.slider::-webkit-slider-thumb','background: green');</code></p>
  
  <p>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 <code>.slider::-webkit-slider-thumb</code> <code>background</code> value in my code.
  Thanks to anyone who has any ideas</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.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;
      }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;input type="range" min="1" max="100" value="50" class="slider" id="myRange"&gt;</code></pre>
  </div>
  </div>
  </p>