"Si un ouvrier veut bien faire son travail, il doit d'abord affûter ses outils." - Confucius, "Les Entretiens de Confucius. Lu Linggong"
Outils en ligne
Tutoriel logiciel
Navigation sur les sites
La programmation
Page de garde > La programmation > How to Create a Vertically Oriented Range Slider: A Guide to Compatibility and Modern Techniques?

How to Create a Vertically Oriented Range Slider: A Guide to Compatibility and Modern Techniques?

Publié le 2024-11-08
Parcourir:902

How to Create a Vertically Oriented Range Slider: A Guide to Compatibility and Modern Techniques?

Vertical Range Input Slider: Orientation and Compatibility

In the world of web development, presenting sliders vertically can enhance user experience and accommodate specific layouts. This article explores techniques for achieving vertical orientation with an HTML5 <input type="range"> slider, considering browser compatibility and modern implementation.

Initially, it was believed that adjusting the height and width of the slider element would trigger automatic vertical orientation in supported browsers. However, testing revealed that this method is no longer reliable, leaving developers seeking alternative solutions.

Modern Approach

For current versions of Chrome and Firefox, the most efficient solution involves utilizing the writing-mode and direction properties:

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

Setting writing-mode to vertical-lr (or vertical-rl) flips the writing direction, while direction: rtl (right-to-left) ensures that sliding upwards reduces the value, adhering to standard conventions.

Legacy Browser Support

For older versions of Chrome and other Chromium-based browsers:

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

Applying appearance: slider-vertical forces the vertical orientation, and setting a fixed width aligns with the default width used in modern browsers.

Firefox Compatibility

For older versions of Firefox:

html {
    orient: vertical;
}

Adding the orient attribute to the <html> element instigates the vertical orientation for all sliders on the page.

In summary, these techniques provide reliable methods for displaying <input type="range"> sliders vertically, ensuring optimal user experience and visual appeal across a wide range of browsers.

Dernier tutoriel Plus>
ClassificationPlus>
Apprendre le japonais Apprendre le coréen Apprendre le chinois Apprendre une langue étrangère Jeu Problème commun Périphériques technologiques IA Tutoriel logiciel La programmation Article

Étudier le chinois

OutilPlus>
Décodage d'images en base64
Pinyin chinois
Encodage Unicode
Compression de chiffrement d'obscurcissement JS
Outil de chiffrement hexadécimal d'URL
Outil de conversion d'encodage UTF-8
Outils d'encodage et de décodage Ascii en ligne
Outil de cryptage MD5
Outil de cryptage et de décryptage en ligne de texte de hachage/hachage
Cryptage SHA en ligne

Clause de non-responsabilité: Toutes les ressources fournies proviennent en partie d'Internet. En cas de violation de vos droits d'auteur ou d'autres droits et intérêts, veuillez expliquer les raisons détaillées et fournir une preuve du droit d'auteur ou des droits et intérêts, puis l'envoyer à l'adresse e-mail : [email protected]. Nous nous en occuperons pour vous dans les plus brefs délais.

Copyright© 2022 湘ICP备2022001581号-3