Controle deslizante de entrada de faixa vertical: orientação e compatibilidade

No mundo do desenvolvimento web, apresentar controles deslizantes verticalmente pode aprimorar a experiência do usuário e acomodar layouts específicos . Este artigo explora técnicas para obter orientação vertical com um controle deslizante HTML5 , considerando a compatibilidade do navegador e a implementação moderna.

Inicialmente, acreditava-se que ajustar a altura e a largura do elemento deslizante seria acionar orientação vertical automática em navegadores suportados. No entanto, os testes revelaram que esse método não é mais confiável, deixando os desenvolvedores em busca de soluções alternativas.

Abordagem Moderna

Para versões atuais do Chrome e Firefox, a solução mais eficiente envolve a utilização do modo de escrita e das propriedades de direção:

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

Definir o modo de escrita como vertical-lr (ou vertical-rl) inverte a direção da escrita, enquanto direction: rtl (da direita para a esquerda) garante que deslizar para cima reduza o valor, aderindo às convenções padrão.

Suporte a navegadores legados

Para versões mais antigas do Chrome e outros navegadores baseados em Chromium:

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

Aplicando aparência: slider-vertical força a orientação vertical e definir uma largura fixa se alinha com a largura padrão usada em navegadores modernos.

Compatibilidade com Firefox

Para versões mais antigas do Firefox:

html {
    orient: vertical;
}

Adicionar o atributo orient ao elemento instiga a orientação vertical para todos os controles deslizantes da página.

Em resumo, essas técnicas fornecem métodos confiáveis ​​para exibir controles deslizantes verticalmente, garantindo ótima experiência do usuário e apelo visual em uma ampla variedade de navegadores.