How to change color of range thumb?

Question

I have been trying to change the color of the thumb of a range in css to white since an hour now but nothing seems to work.

#red::-webkit-slider-thumb {
  margin-top: -2.5px;
  cursor: pointer;
  background-color: white;
  background-image: white;
  background: white;
  color: white;}

Please help me out. I use brave browser.

https://stackoverflow.com/questions/56851845/how-to-change-the-input-slider-thumb-colour-depending-on-value — DecPK, Mar 27 '21 at 07:34

score 2 · Accepted Answer · edited Dec 26 '22 at 12:12

.slider-container {
  background: grey;
  padding: 2rem;
}

#red {
  -webkit-appearance: none;
  width: 100%;
  height: 1rem;
  background: #000;
  border-radius: .5rem;
}

#red::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 2rem;
  height: 2rem;
  background-color: #fff;
  cursor: pointer;
  border-radius: 50%;
}

<div class="slider-container">
  <p>Custom range slider:</p>
  <input type="range" min="1" max="100" value="50" id="red">
</div>

How to change color of range thumb?

1 Answers1