::-webkit-slider-thumb

A range slider you can actually style

CaveatThe WebKit and Gecko thumb selectors cannot share a rule. One unknown pseudo-element invalidates the entire selector list, so a combined rule silently styles nothing anywhere. Write them out separately, every time.

FallbackThe thumb needs appearance: none of its own, not just the input. And margin-top is what centres it on the track, since the thumb aligns to the track top by default.

/* never combine these two */
input::-webkit-slider-thumb {
  appearance: none;
  margin-top: -7px; /* centres on the track */
}
input::-moz-range-thumb { border: 0; }

Published 9 Aug 2026