<input class="rg" type="range" min="0" max="100" value="60" aria-label="Volume">About this slider
A native range input with a custom track and thumb, using the track and thumb pseudo-elements for WebKit and Firefox.
How it works
The native range input loses its default look with appearance: none. The track is a gradient background on the input itself, and the round thumb is styled through the ::-webkit-slider-thumb and ::-moz-range-thumb pseudo-elements. Both engines need their own rule because the pseudo-elements are vendor specific.
Ways to customise it
- Change the gradient colours on the input for a different track.
- Adjust the thumb border width and colour to restyle the handle.
- Increase the height of the track for a chunkier slider.
Good to know
A real range input keeps keyboard and touch support and form value handling. Remember to keep the focus-visible outline, and add a visible value display with script if users need to read the exact number.
Open an example, copy the HTML and the CSS, and paste them into your page. There is nothing to install and no JavaScript to load.