Home >Web Front-end >CSS Tutorial >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:03754browse
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!