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

90

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?

html  css 
— gilly3
fuente

Respuestas:

134

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" />
Expandir fragmento

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.

— gilly3
fuente
2
+1 para el descargo de responsabilidad sobre -webkit-appearance- No lo sabía. Lo cambia todo.
— Robin Winslow
El elemento de entrada con type = "range" en IE es muy sensible a los valores de ancho / alto / visualización. Al usar Bootstrap, algunos de estos valores pueden sobrescribirse sin darse cuenta (especialmente si no usa css general como en la respuesta). Para uno de mis rangos verticales utilizo CSS como este: .vert {-ms-writing-mode: bt-lr; / * IE / -webkit-apariencia: deslizador-vertical; / WebKit * / altura: 210px; ancho: 20px! importante; relleno: 0 5px; display: inline-block! important; }
— mp31415
1
Definitivamente no soy fan de !important. Siempre es mejor fortalecer tu selector. En lugar de simplemente .vert, usa algo como input[type=range].vert.
— gilly3
74

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"/>
Expandir fragmento

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.

— MaxPRafferty
fuente
2
Tenga en cuenta que debe convertirlo en 270 si desea que se corresponda con valores más altos que suba y valores más bajos que bajen. Editó su respuesta.
— agosto
1
Prefiero este enfoque ya que admite estilos CSS personalizados. Con el otro enfoque, el estilo personalizado hace que el control deslizante actúe de manera divertida
— Kim T
1
Esto es simple pero brillante
— Christopher M.
En lugar de position: absolute, puede usar display: inline-block; con origen de transformación.
— Denis Giffeler
@DenisGiffeler, la posición absoluta no es realmente parte de esta solución, es solo una forma conveniente de hacer que el ejemplo de SO se muestre correctamente. Hay muchas formas de lograr el posicionamiento según su caso de uso.
— MaxPRafferty
25

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"/>
Expandir fragmento

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

— Ifeanyi Chukwu
fuente
también incluya algo como transform-origin: center left;que el control deslizante esté justificado a la izquierda, no al centro.
— DragonLord
3 

.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>
Expandir fragmento

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

— Mahdi Bashirpour
fuente
El enlace fuente incluye una demostración que muestra varios controles deslizantes con diferentes tratamientos de estilo.
— Josh Habdas
0

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;
}
— Ashiq Dey
fuente
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.