title: Changing the color of the range slider in materializecss
body: <p>I'm using the range slider from here: <a href="http://materializecss.com/forms.html" rel="noreferrer">http://materializecss.com/forms.html</a></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-html lang-html prettyprint-override"><code>&lt;link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/css/materialize.min.css" rel="stylesheet"/&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/js/materialize.js"&gt;&lt;/script&gt;
  
  &lt;form action="#"&gt;
      &lt;p class="range-field"&gt;
        &lt;input type="range" id="test5" min="0" max="100" /&gt;
      &lt;/p&gt;
    &lt;/form&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>And I managed to change the color of the "thumb" that pops up when you click on the slider by using this:</p>
  
  <pre><code>input[type=range]+.thumb{
      background-color: #400090;
  }
  </code></pre>
  
  <p>And normally I can just inspect the element on chrome and get what class I have to change to change its color. For some reasons I can't figure out how to inspect the "dot" in the slider to find what class I have to add to change its color. </p>