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.
Readers' comments 16
Left under the original article, as archived.
About this article
| Published in | ODIN blog |
|---|---|
| Date | November 30, 2012 |
| Author | Mike Taylor |
| Tags | input, HTML5 |
| Original | Internet Archive |
Mike TaylorFriday, November 30, 2012 5:37:08 PM
QuHnoFriday, November 30, 2012 6:28:58 PM
I can't remember when I started experimenting with them.
http://quhno.internetstrahlen.de/myopera/extensions/colorpicker/
was one of the earlier experiments - I think - and that was March 2011 ...
JanghouFriday, November 30, 2012 9:21:41 PM
Originally posted by miketaylr:
Yeah, CSS Transforms was my initial thought, (take them out the flow.)
Somehow rotated input fields don't work in Opera
http://jsfiddle.net/Janghou/H92SF/
But the spec way is the best.
@QuHno, dude, your demo is from outer space. Let's go smoke some pot
QuHnoFriday, November 30, 2012 9:53:06 PM
http://caniuse.com/#feat=input-range
is slightly misleading. I have tested with the latest Chrome 25.0.1343.0 (170484) and it did *not* support vertical sliders, so it should get a "partial supported" only - but as far as I can see the spec doesn't say that it *must* rotate them but that it could do so, or did I miss something?
Originally posted by Janghou:
works fine for me, see screenshot:
http://my.opera.com/QuHno/albums/showpic.dml?album=3811932&picture=171762662
Mike TaylorSaturday, December 1, 2012 12:22:53 AM
Originally posted by QuHno:
That's entirely possible. Good news is you can submit pull requests or file issues on the data now: http://github.com/fyrd/caniuseJanghouSaturday, December 1, 2012 10:58:49 PM
Tried on clean install with stable and next (-pd tmp) and get this in Linux Ubuntu 64
https://files.myopera.com/Janghou/screenshots/EditthisFiddle-jsFiddle-OperaNext_058.png
Seems quite borked, background of ranges is really weird and only two sliders are shown
QuHnoSunday, December 2, 2012 6:51:31 PM
and yes, your screenshot looks really weird. Some other users confirmed it with different Linux distributions, but at least one with Open Suse had no problems.
JimTuesday, December 4, 2012 12:31:05 AM
Richard SextonThursday, January 3, 2013 10:36:06 PM
What about other styling tips? For example the image shown at the top is the same as the Opera skin slider in the lower right. I don't really care about other browsers but how would I style what webkit calls the slider thumbnail?
I'd be happy to have it be a css sphere but at this point I'll take anything. I tried the webkit commands, no dice, but the I didn't expect them to really work.
I'd like to be able to use Opera skin widgets ideally so as the user reconfigures the browser their webware also changes automatically.
Thanks and keep up the outstanding work.
Richard SextonMonday, January 7, 2013 4:01:27 AM
Richard SextonThursday, January 10, 2013 9:00:44 PM
Is there anybody in there?
Just nod if you can hear me
Is there anyone home?
JimTuesday, January 15, 2013 8:16:39 PM
Originally posted by rs79:
I don't think Opera allows it to be re-skinned via css.Bruce LawsonTuesday, January 22, 2013 3:45:13 PM
not quite sure what you mean by "webware also changes automatically" but there currently isn't a mechanism to style these new browser-supplied widgets. I wrote about this today http://www.brucelawson.co.uk/2013/on-the-styling-of-forms/
QuHnoWednesday, January 23, 2013 6:53:28 AM
The beast has a name and it's name is SELECT
btw: An input type="font", exposing the system font dialog the same way as input type="color" does for the colo(u)rs, would be a nice to have too - can we have that as Opera proprietary until someone writes a convincing proposal to Hixie?
Richard SextonFriday, February 1, 2013 4:55:33 AM
Richard SextonSaturday, February 2, 2013 9:22:14 PM
That is, if we could use the range slider that's there now (grey on my machine) in our web apps and somebody changed the browser skin to, say, the "OMG PONIES" theme* then the range slider in our apps would also change, that is, it extend the property of being skinnable to the app as well as the browser.
*no, there isn't an "OMG PONIES" theme.