NitinMistry free asked 3 years ago


I wanted to change the color of the slider component's thumb (not the value bubble) but I couldn't find any help regarding this. I want to make the color dynamic as I would like my application users to set the value to their choice. Can you please help? I would prefer a solution that involves a simple CSS override in my custom class file.

NitinMistry free answered 3 years ago

OK. For the benefit of anyone else, I've figured this out myself...

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

alexq free answered 3 years ago

To change the color of the circle that is dragged:

.range-field input[type=range]::-moz-range-thumb{background:#AA0029;}

NitinMistry free answered 3 years ago

Hi Bartłomiej,

No. I actually want to change the color of the thumb itself (the thing which we drag) and not the value bubble which appears at the top.

Are you looking for something like this?

Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.



Specification of the issue

  • User: Free
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: 4.6.0
  • Device: Desktop
  • Browser: Chrome 71.0.3578.98 (64-bit)
  • OS: Windows 8.1
  • Provided sample code: No
  • Provided link: No