::-webkit-slider-thumb, ::-moz-range-thumb

A range slider you can actually style

CaveatChrome and Safari style the thumb through ::-webkit-slider-thumb, Firefox through ::-moz-range-thumb. There is no ::-moz-slider-thumb. The two cannot share a rule: one unknown pseudo-element invalidates the whole selector list, so a combined rule silently styles nothing anywhere. Write them out separately, every time, and the same goes for the tracks.

FallbackThe WebKit thumb needs appearance: none of its own, not just the input, and a negative margin-top of half the height difference, because it sits on the top edge of the track. Firefox centres its thumb unaided and paints the filled part with ::-moz-range-progress; WebKit has nothing like it, so the filled half takes a trick. Miss a selector and that engine draws its default slider.

/* never in one rule: one unknown selector
   and the browser drops the lot */
input[type="range"] {
  appearance: none;
  background: transparent;
}
/* Chrome, Safari, Edge */
input::-webkit-slider-runnable-track {
  height: 5px;
  border-radius: 999px;
  background: #ddd;
}
input::-webkit-slider-thumb {
  appearance: none;
  width: 19px;
  height: 19px;
  margin-top: -7px; /* (5 - 19) / 2 */
  border-radius: 50%;
  background: #111;
}
/* Firefox: "range", not "slider" */
input::-moz-range-track {
  height: 5px;
  border-radius: 999px;
  background: #ddd;
}
input::-moz-range-thumb {
  width: 19px;
  height: 19px;
  border: 0;
  border-radius: 50%;
  background: #111;
}

Published 9 Aug 2026