<input class="rf" type="range" min="0" max="100" value="40" aria-label="Brightness">About this slider
A range input whose track fills with colour up to the thumb, using the progress pseudo-element in Firefox and a gradient hack in WebKit.
How it works
The range input has overflow hidden so a very large shadow is clipped to the track. In WebKit browsers the thumb has a box-shadow with a huge negative horizontal offset, which fills everything to its left with colour, and Firefox has a dedicated ::-moz-range-progress pseudo-element. Both give the same filled track from one input.
Ways to customise it
- Change the fill colours #f59e0b and the thumb colour.
- Edit the track height of 10px.
- Set min, max and value on the input for your own range.
Good to know
It is still a real range input with full keyboard and touch support. The fill trick relies on the thumb being a small square, so keep those sizes in sync.
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.