← All elements
<label class="ms"><span>How was your day?</span><input type="range" min="0" max="100" value="64"></label>About this slider
A range input styled with a gradient track and a large round thumb, for picking a mood or a rating.
How it works
A native range input has its appearance removed, then the track is a three-colour gradient and the thumb is a white circle with a thick border. Separate rules style the WebKit and Firefox thumbs.
Ways to customise it
- Change the gradient stops.
- Resize the thumb.
- Change min, max and value.
Good to know
A range input is natively accessible. Add a visible value output if the number matters. Keep the focus ring visible.
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.