The State of Vertical Range Inputs (As of Nov 2012)

Yesterday I found myself needing to write a silly demo to sketch out some code (to be used in a larger project). The idea was to dump a ton of <input type=range> elements on a page, alternate between horizontal and vertical orientations, and manipulate the value property in various magical ways.

The default rendering of type=range is a horizontal slider widget. To see it yourself quickly, put the following in your browser URL bar: `

data:text/html, <input type="range">

There’s a catch though — not all browsers support this yet. But we’re really, really close, especially with an implementation in progress for Firefox (Microsoft beating Mozilla? End of days, etc.).

So how do you get a vertical range slider? The HTML Standard mentions “determin[ing] the orientation of the control from the ratio of the style-sheet-specified height and width properties.” So as long as you define the width to be smaller than the height, your browser should create a vertical range input for you.

You can see if this works in your browser right now.

Unfortunately, Opera is still the only browser to support this out of the box. Webkit-based browsers can get by with the -webkit-appearance: slider-vertical non-standard CSS, but that doesn’t help Firefox or IE10.

But what about Firefox? Luckily there’s a handful of polyfills out there. You’ll just have to let me know if anyone of them enable vertical ranges, and will work for IE10!

So the good news is that we’re really close to all modern browsers supporting <input type=range>. And the less good news is that native vertical ones need more time. It’s time to tweak my silly demo.