Skip to content
WebTricks

Custom range slider

A cross-browser styled range input with a themeable track and thumb.

  • form
  • range
  • slider
  • input
  • ui
Track#3a3f4f
Thumb ring#6b46ff
Thumb size18px
HTML 
<input type="range" class="range" min="0" max="100" value="50" />
CSS 
:root {
    --track: #3a3f4f;
    --fill: #6b46ff;
    --thumb: #ffffff;
    --h: 6px;
    --thumb-size: 18px;
}

.range {
    -webkit-appearance: none;
    appearance: none;
    width: 240px;
    height: var(--h);
    border-radius: 999px;
    background: var(--track);
    cursor: pointer;
    outline: none;
}
.range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: var(--thumb-size);
    height: var(--thumb-size);
    border-radius: 50%;
    background: var(--thumb);
    border: 3px solid var(--fill);
    cursor: pointer;
}
.range::-moz-range-thumb {
    width: var(--thumb-size);
    height: var(--thumb-size);
    border-radius: 50%;
    background: var(--thumb);
    border: 3px solid var(--fill);
    cursor: pointer;
}

How it works

Range inputs need styling in two engines:

  • -webkit-appearance: none (plus appearance) strips the default look, then ::-webkit-slider-thumb styles the handle for Chromium and Safari.
  • ::-moz-range-thumb does the same for Firefox — the rules can’t be combined, so both blocks are required.

The track is the input’s own background. Everything themes from the custom properties, and the handle scales from --thumb-size. Drag it in the preview.