Cómo mostrar un control deslizante de entrada de rango verticalmente

Me gustaría mostrar un <input type="range" />control deslizante verticalmente. Solo me preocupan los navegadores que admiten el control deslizante de rango.

Encontré algunos comentarios y referencias que parecen indicar que establecer la altura mayor que el ancho hará que el navegador cambie la orientación automáticamente, pero en mis pruebas, eso solo funciona en Opera, solía funcionar en Opera, pero ya no. ¿Cómo puedo orientar un control deslizante de rango HTML5 verticalmente?

Primero, establezca la altura mayor que el ancho. En teoría, esto es todo lo que debería necesitar. La especificación HTML5 sugiere tanto :

... el UA determinó la orientación del control a partir de la relación de las propiedades de altura y ancho especificadas en la hoja de estilo.

Opera lo implementó de esta manera, pero Opera ahora usa WebKit Blink . A día de hoy, ningún navegador implementa un control deslizante vertical basado únicamente en que la altura sea mayor que el ancho.

Independientemente, es necesario establecer una altura mayor que el ancho para obtener el diseño correcto entre los navegadores. La aplicación de relleno derecho e izquierdo también ayudará con el diseño y el posicionamiento.

Para Chrome, use -webkit-appearance: slider-vertical.

Para IE, use writing-mode: bt-lr.

Para Firefox, agregue un orient="vertical"atributo al html. Lástima que lo hayan hecho de esta manera. Los estilos visuales deben controlarse mediante CSS, no HTML.

input[type=range][orient=vertical]
{
    writing-mode: bt-lr; /* IE */
    -webkit-appearance: slider-vertical; /* WebKit */
    width: 8px;
    height: 175px;
    padding: 0 5px;
}

<input type="range" orient="vertical" />

Descargos de responsabilidad:

Esta solución se basa en las implementaciones actuales del navegador de propiedades CSS aún no definidas o no finalizadas. Si tiene la intención de usarlo en su código, esté preparado para realizar ajustes en el código a medida que se lanzan nuevas versiones del navegador y se completan las recomendaciones de w3c.

MDN contiene una advertencia explícita contra el uso -webkit-appearanceen la web:

No utilice esta propiedad en sitios web: no solo no es estándar, sino que su comportamiento cambia de un navegador a otro. Incluso la palabra clave noneno tiene el mismo comportamiento en cada elemento del formulario en diferentes navegadores, y algunos no la admiten en absoluto.

El título de la demostración del control deslizante vertical en la documentación de IE indica erróneamente que la configuración de una altura mayor que el ancho mostrará un control deslizante de rango verticalmente, pero esto no funciona. En la sección de código , claramente no establece la altura ni el ancho, sino que usa writing-mode. La writing-modepropiedad, implementada por IE , es muy robusta. Lamentablemente, los valores definidos en el borrador de trabajo actual de la especificación al momento de escribir este artículo, son mucho más limitados. En caso de que las versiones futuras de IE abandonen el soporte de bt-lren favor de la propuesta actualmente vertical-lr(que sería el equivalente de tb-lr), el control deslizante se mostraría al revés. Lo más probable es que las versiones futuras extiendan lawriting-modeaceptar nuevos valores en lugar de dejar de admitir valores existentes. Pero es bueno saber con qué estás lidiando.

Puede hacer esto con transformaciones CSS, aunque tenga cuidado con la altura / ancho del contenedor. Además, es posible que deba colocarlo más abajo:

input[type="range"] {
   position: absolute;
   top: 40%;
   transform: rotate(270deg);
}

<input type="range"/>

o el equivalente de transformación 3d:

input[type="range"] {
   transform: rotateZ(270deg);
}

También puede usar esto para cambiar la dirección de la diapositiva configurándolo en 180 grados o 90 grados para horizontal o vertical respectivamente.

Sin cambiar la posición a absoluta, consulte a continuación. Esto también es compatible con todos los navegadores recientes.

.vranger {
  margin-top: 50px;
   transform: rotate(270deg);
  -moz-transform: rotate(270deg); /*do same for other browsers if required*/
}

<input type="range" class="vranger"/>

para navegadores muy antiguos, puede utilizar -sand-transform: rotate(10deg);desde de papel de lija CSS

o usar

selector de prefijo como -ms-transform: rotate(270deg);para IE9

.container {
    border: 3px solid #eee;
    margin: 10px;
    padding: 10px;
    float: left;
    text-align: center;
    max-width: 20%
}

input[type=range].range {
    cursor: pointer;
    width: 100px !important;
    -webkit-appearance: none;
    z-index: 200;
    width: 50px;
    border: 1px solid #e6e6e6;
    background-color: #e6e6e6;
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#e6e6e6), to(#d2d2d2));
    background-image: -webkit-linear-gradient(right, #e6e6e6, #d2d2d2);
    background-image: -moz-linear-gradient(right, #e6e6e6, #d2d2d2);
    background-image: -ms-linear-gradient(right, #e6e6e6, #d2d2d2);
    background-image: -o-linear-gradient(right, #e6e6e6, #d2d2d2)
}

input[type=range].range:focus {
    border: 0 !important;
    outline: 0 !important
}

input[type=range].range::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 10px;
    height: 10px;
    background-color: #555;
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#4ddbff), to(#0cf));
    background-image: -webkit-linear-gradient(right, #4ddbff, #0cf);
    background-image: -moz-linear-gradient(right, #4ddbff, #0cf);
    background-image: -ms-linear-gradient(right, #4ddbff, #0cf);
    background-image: -o-linear-gradient(right, #4ddbff, #0cf)
}

input[type=range].round {
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px
}

input[type=range].round::-webkit-slider-thumb {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -o-border-radius: 5px
}

.vertical-lowest-first {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg)
}

.vertical-heighest-first {
    -webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    transform: rotate(270deg)
}

<div class="container" style="margin-left: 0px">
    <br><br>
    <input class="range vertical-lowest-first" type="range" min="0" max="1" step="0.1" value="1">
    <br><br><br>
</div>

<div class="container">
    <br><br>
    <input class="range vertical-heighest-first" type="range" min="0" max="1" step="0.1" value="1">
    <br><br><br>
</div>


<div class="container">
    <br><br>
    <input class="range vertical-lowest-first round" type="range" min="0" max="1" step="0.1" value="1">
    <br><br><br>
</div>


<div class="container" style="margin-right: 0px">
    <br><br>
    <input class="range vertical-heighest-first round" type="range" min="0" max="1" step="0.1" value="1">
    <br><br><br>
</div>

Fuente: http://twiggle-web-design.com/tutorials/Custom-Vertical-Input-Range-CSS3.html

Es muy simple. Lo había implementado usando -webkit-appearance: slider-vertical, funcionó en chorme, Firefox, Edge

<input type="range">

input[type=range]{
    writing-mode: bt-lr; /* IE */
    -webkit-appearance: slider-vertical; /* WebKit */
    width: 50px;
    height: 200px;
    padding: 0 24px;
    outline: none;
    background:transparent;
}