Topic: Slider color
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.
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;
}
To change the color of the circle that is dragged:
.range-field input[type=range]::-moz-range-thumb{background:#AA0029;}
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.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- 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