How Can I Display an HTML5 Range Slider Vertically?

How to Display an HTML5 Range Slider Vertically

Q&A:

Q: Can I display an HTML5 range slider vertically and how?

A: Yes, as of April 2024 for Chrome (et al), and November 2023 for Firefox, you can use the CSS properties writing-mode: vertical-lr (or vertical-rl) and direction: rtl. For older browsers, you can use appearance: slider-vertical, set a width, or add an orient="vertical" attribute to the html element.

Additional Details:

For Chrome (et al) and Firefox (current versions):

• Use writing-mode: vertical-lr (or vertical-rl) to orient the slider vertically.
• Use direction: rtl to ensure the slider moves in the correct direction (up for low values, down for high values).

For older versions of Chrome (and other chromium-based browsers):

• Use appearance: slider-vertical to orient the slider vertically.
• Set a width, e.g., width: 16px, to define the height of the slider.

For older versions of Firefox:

• Add an orient="vertical" attribute to the html element, e.g., .

The above is the detailed content of How Can I Display an HTML5 Range Slider Vertically?. For more information, please follow other related articles on the PHP Chinese website!