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