Control deslizante de entrada de rango vertical: orientación y compatibilidad

En el mundo del desarrollo web, la presentación de controles deslizantes verticalmente puede mejorar la experiencia del usuario y adaptarse a diseños específicos . Este artículo explora técnicas para lograr la orientación vertical con un control deslizante HTML5 , teniendo en cuenta la compatibilidad del navegador y la implementación moderna.

Inicialmente, se creía que ajustar la altura y el ancho del elemento deslizante activar la orientación vertical automática en los navegadores compatibles. Sin embargo, las pruebas revelaron que este método ya no es confiable, lo que hace que los desarrolladores busquen soluciones alternativas.

Enfoque moderno

Para las versiones actuales de Chrome y Firefox, la solución más eficiente implica utilizar las propiedades de modo de escritura y dirección:

input[type=range] {
    writing-mode: vertical-lr;
    direction: rtl;
}

Establecer el modo de escritura en vertical-lr (o vertical-rl) invierte la dirección de escritura, mientras que dirección: rtl (de derecha a izquierda) garantiza que deslizar hacia arriba reduzca el valor, siguiendo las convenciones estándar.

Compatibilidad con navegadores antiguos

Para versiones anteriores de Chrome y otras versiones basadas en Chromium navegadores:

input[type=range] {
    appearance: slider-vertical;
    width: 16px;
}

Aplicar apariencia: el control deslizante vertical fuerza la orientación vertical y establecer un ancho fijo se alinea con el ancho predeterminado utilizado en los navegadores modernos.

Compatibilidad con Firefox

Para versiones anteriores de Firefox:

html {
    orient: vertical;
}

Agregar el atributo de orientación al elemento activa la orientación vertical para todos los controles deslizantes de la página.

En resumen, estas técnicas proporcionan métodos confiables para mostrar controles deslizantes verticalmente, lo que garantiza una experiencia de usuario óptima y un atractivo visual en una amplia gama de navegadores.