Changing the color of the range slider in materializecss

Question

I'm using the range slider from here: http://materializecss.com/forms.html

<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/css/materialize.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/js/materialize.js"></script>

<form action="#">
    <p class="range-field">
      <input type="range" id="test5" min="0" max="100" />
    </p>
  </form>

And I managed to change the color of the "thumb" that pops up when you click on the slider by using this:

input[type=range]+.thumb{
    background-color: #400090;
}

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.

Answer 1

This is what I did to change the dot on the slider and the thumb bubble colors.

Screenshot and snippet attached

<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/css/materialize.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/js/materialize.js"></script>

<style>

  input[type=range]::-webkit-slider-thumb {
    background-color: red;
  }
  input[type=range]::-moz-range-thumb {
    background-color: red;
  }
  input[type=range]::-ms-thumb {
    background-color: red;
  }

  /***** These are to edit the thumb and the text inside the thumb *****/
  input[type=range] + .thumb {
    background-color: #dedede;
  }
  input[type=range] + .thumb.active .value {
    color: red;
  }
</style>
<form action="#">
  <p class="range-field">
    <input type="range" id="test5" min="0" max="100" />
  </p>
</form>