Topic: Change range bubble color

Darryl free asked 2 years ago

How do I change the color of the bubble that appears above the range slider when someone clicks and drags it? The one with the number in it.

Michał Duszak staff answered 2 years ago

Hello, it's possible using .range .thumb:after selector, for example:

.range .thumb:after {
    background: rebeccapurple;

Please see the snippet with the solution:

Darryl free answered 2 years ago

Anything? I can see that the actual slider color can be changed via --

.form-range::-webkit-slider-thumb {
  background-color: #fff !important;
.form-range::-moz-range-thumb {
  background-color: #fff !important;
.form-range::-ms-thumb {
  background-color: #fff !important;

Kinanda Nugraha priority commented 1 year ago

Exactly what I'm looking for. Thanks!

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

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB Standard
  • MDB Version: MDB5 3.9.0
  • Device: PC
  • Browser: Chrome
  • OS: Win
  • Provided sample code: No
  • Provided link: Yes