NitinMistry free asked 3 years ago


Hi,

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.

FREE CONSULTATION

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

Status

Resolved

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