← All elements
<div class="vf"><input type="range" min="0" max="100" value="70" aria-label="Volume"></div>About this slider
A vertical mixing-desk fader made from a rotated range input with a notched track and glowing level.
How it works
A normal range input is rotated by minus 90 degrees and centred inside a fixed-height housing, so it behaves as a vertical fader. The thumb is a small gradient bar styled like a mixing desk slider.
Ways to customise it
- Change the track gradient.
- Edit 150px to change the fader length.
- Add tick marks with a repeating gradient.
Good to know
Rotated range inputs keep keyboard behaviour. Test screen reader announcements because the visual orientation differs from the semantic one.
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.