← All Examples

Styled Range Slider

A custom-styled range input using CSS track and thumb pseudo-elements.

Published May 19, 2026

Demo

HTML

<input type="range" min="0" max="100" value="50">

CSS

input[type="range"] {
  appearance: none;
  width: 220px;
  height: 6px;
  background: #2a2a2d;
  border-radius: 999px;
  outline: none;
  cursor: pointer;
}

input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  width: 22px;
  height: 22px;
  background: #5b4cdb;
  border-radius: 50%;
  box-shadow: 0 1px 4px rgba(91,76,219,.4);
}

input[type="range"]::-moz-range-thumb {
  width: 22px;
  height: 22px;
  background: #5b4cdb;
  border: none;
  border-radius: 50%;
}

How it works

appearance:none removes the browser default. The track is styled directly on the <input> element. The thumb is styled via the vendor-specific ::-webkit-slider-thumb and ::-moz-range-thumb pseudo-elements. Both Webkit and Firefox need separate rules since they don't share a standard pseudo-element name yet.