rango de tipo de entrada HTML5 para vertical orientación de firefox?

Question

Me preguntaba si alguien sabe si la orientación vertical en un rango de tipo input es posible en FireFox.

Sé que en Chrome y Safari que puede hacer:

-webkit-appearance: slider-vertical; 

Y he intentado algo como esto en 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); 
} 

Aunque esto crea el efecto que me gustaría, la orientación del rango del puntero predeterminado input aún requiere que se mueva hacia la izquierda y derecha para que cambie, y no hacia arriba y hacia abajo como se espera.

Aquí hay un Example, debe verse en FireFox.

Cualquier información nueva y emocionante sobre el tema sería muy apreciada, ¡gracias!

Answer 1

Parece que en las actualizaciones recientes de Firefox, han resuelto este problema. Aquí está la versión actualizada fiddle

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

Y el 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); 
} 

Answer 2

¿Ha considerado echar un vistazo a la implementación del control deslizante jqueryui? http://jqueryui.com/demos/slider/#slider-vertical

Answer 3

Firefox no es compatible con <input type="range">. Su ejemplo está usando fryn's slider polyfill, por lo que debe presentar una falla en el rastreador de problemas github de fryn.