[whatwg] Allowing authors to obtain a vertical <input type=range>

[Jonathan Watt]

The result of the discussion here:

http://www.w3.org/mid/514A17D4.3070806@jwatt.org

is that I've changed Firefox Nightly's handling of <input type=range> to allow 
it to render as a vertical slider if it has an orient="vertical" attribute on 
it. There was only one reply to my email to www-style, but the author suggested 
using an attribute which I'd also concluded was the best thing to do.

I'd like to propose that this attribute be added to the HTML5 specification.

My original email to www-style is reproduced below in case anyone wants to reply 
here, directly quoting parts of my original description of the problem.

-Jonathan


I'm working on <input type=range> support in Mozilla, and one of the questions 
that has come up is how best to allow content authors to change the orientation 
of <input type=range> to be vertical (so the slider runs up/down instead of 
left/right).

There is some vague text in the HTML5 spec describing an <input type=range> 
example that hints that a UA might change a range's orientation based on the 
ratio of its width to height[1], which says:

    Note how the UA determined the orientation of the control from the
    ratio of the style-sheet-specified height and width properties.

As far as I can tell that's all that any relevant specifications say on the 
matter though.

This issue becomes tricky when user agents provide pseudo-elements to allow 
content authors to style the component parts of a range. Typically there are two 
main component parts: the thumb (the bit that can be dragged left/right or 
up/down) and the track (a visual "gutter" or "line" that the thumb is fixed to 
move along).

It seems like, A), it would be desirable to be able to apply different styles to 
the thumb and track depending on whether the range is horizontal or vertical. 
For example, content authors might want to give the thumb a background image 
that would make it appear like one of the following two diagrams depending on 
its orientation:

                                            | |
                                            | |
                    __                      | |
                   /  \                    _|_|_
         ----------|  |--------           |     \
         ----------|  |--------           |_____/
                   |__|                     | |
                                            | |
                                            | |
                                            | |

It also seems like, B), it would be desirable to be able to use CSS to specify 
the orientation of the range, since, to a certain extent, whether the range is 
vertical or not is a matter or presentation.

Unfortunately, B (specifying the orientation using a new CSS property called 
'orient', say) seem to conflict with A. Content author's don't have a way to 
select on the computed value of one property to specify the values of other 
properties, so they can't select on the computed value of an 'orient' property 
to specify different styling for horizontal/vertical range.

One way to solve the issue would be to reject B and have an 'orient' _attribute_ 
instead, since it _is_ possible to select on attributes.

It may seem tempting to say that if content authors are specifying different 
styles for vertical and horizontal range, then they can specify those styles in 
the same rules that specify the 'orient' property. It doesn't seem like that is 
going to provide for authors' needs in some circumstances though. For example, 
if a JavaScript library provides API to insert a "vertical range", and it 
specifies style="orient:vertical" on the range that it inserts.

Does anyone have any thoughts on the mechanism that should be provided to 
content authors to specify that an <input type=range> should be vertical, given 
the above?

Jonathan

1.
http://www.whatwg.org/specs/web-apps/current-work/multipage/states-of-the-type-attribute.html#range-state-%28type=range%29