Home > Article > Web Front-end > How can I make an HTML5 range slider display vertically across all browsers?

How can I make an HTML5 range slider display vertically across all browsers?

Barbara StreisandOriginal: 2024-10-27 09:48:03603browse

Vertical Orientation of HTML5 Range Slider

Displaying a range slider vertically in HTML5 has proven challenging due to inconsistencies across browsers. To achieve this, various methods are necessary based on the browser's support.

Modern Browsers (Chrome and Firefox >=2024)

For contemporary versions of Chrome and Firefox, the following solution proves effective:

<code class="css">input[type=range] {
  writing-mode: vertical-lr;
  direction: rtl;
  width: 16px;
}</code>

This approach aligns the slider vertically, with direction: rtl ensuring that sliding up increases the value, and sliding down decreases it.

Legacy Chrome (and other Chromium-based browsers)

For older versions of Chrome and Chromium-based browsers, the following works:

<code class="css">input[type=range] {
  appearance: slider-vertical;
  width: 16px; /* Optional, suggested to match newer browsers */
}</code>

This solution forces the slider to be displayed vertically, although it may not inherit the desired styling (e.g., track and thumb appearance).

Legacy Firefox

For older versions of Firefox, an orient attribute within the html element is required:

<code class="html"><html orient="vertical">
  <body>
    <input type="range" />
  </body>
</html></code>

Additionally, the following CSS is necessary:

<code class="css">input[type=range] {
  vertical-align: bottom;
}</code>

This method aligns the slider vertically, but it may have limitations in handling styles and user interaction.

Compatible Example

The following code snippet provides an example that should work across all major browsers (as of April 2024):

<code class="html"><input type="range" orient="vertical" /></code>

<code class="css">input[type=range][orient=vertical] {
  writing-mode: vertical-lr;
  direction: rtl;
  appearance: slider-vertical;
  width: 16px;
  vertical-align: bottom;
}</code>

This comprehensive solution ensures that the range slider is displayed vertically in a consistent manner across different browser versions.

The above is the detailed content of How can I make an HTML5 range slider display vertically across all browsers?. For more information, please follow other related articles on the PHP Chinese website!

html5 firefox css chrome html for Attribute this display

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to Achieve a Fade-Out Effect in CSS3: Keyframe Animations vs. Transitions?Next article：How to Achieve a Fade-Out Effect in CSS3: Keyframe Animations vs. Transitions?

See more

How can I make an HTML5 range slider display vertically across all browsers?

Related articles