HTML5 input type range for firefox orientation vertical?

Question

Was wondering if anyone out there knows if vertical orientation on a input type range is possible in FireFox.

I know in Chrome and Safari you can do:

-webkit-appearance: slider-vertical;

And I tried something like this in FireFox:

HTML

<input type="range" name="range" min="0" max="9" step="1" value="3" />

CSS

input[name=range] {
  width: 150px;
  height: 10px;
  -moz-transfrom: rotate(270deg);
}

Even though this does create the effect that I would like, the orientation of the range input default pointer still requires one to drag left and right for it to change, and not up and down as expected.

Here is an Example, must be viewed in FireFox.

Any new and exciting information on the subject would greatly be appreciated, thanks!

Answer 1

It looks like in the recent updates for Firefox, they have solved this problem. Here is the updated fiddle

<input type="range" name="range" min="0" max="9" step="1" value="3" />

And the CSS

input[name=range] {
    position:relative;
    top: 100px;
    width: 150px;
    height: 10px;
    border: 0

    -webkit-transform: rotate(270deg);
       -moz-transform: rotate(270deg);
            transform: rotate(270deg);
}