How can I make an HTML5 range slider display vertically across all browsers?-CSS Tutorial-php.cn

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

Barbara Streisand

Release： 2024-10-27 09:48:03

Original

712 people have browsed it

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

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>

Copy after login

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>

Copy after login

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>

Copy after login

Additionally, the following CSS is necessary:

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

Copy after login

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>

Copy after login

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

Copy after login

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!