Changing the color of the range slider in materializecss

10,940

Solution 1

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

Screenshot and snippet attached

enter image description here

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

Solution 2

    .noUi-connect {
    background: black;
}
.noUi-horizontal .noUi-handle, .noUi-vertical .noUi-handle {
    background: black;
}
.noUi-target.noUi-horizontal .noUi-tooltip {
    background-color: black;
}

check out this pen by alexventuraio

you can also do

document.querySelector('.noUi-tooltip').style.background = 'black';
document.querySelector('.noUi-handle').style.background = 'black';

Use querySelector all to change all. CSS [" .noUi-handle{...} and .noUi... "] is not overriding.

I'm new to stack

Share:
10,940
Stupid.Fat.Cat
Author by

Stupid.Fat.Cat

I like to sleep, a lot....

Updated on July 11, 2022

Comments

  • Stupid.Fat.Cat
    Stupid.Fat.Cat over 1 year

    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.