How to Create Vertical Range Sliders in HTML5: A Cross-Browser Guide

Vertical Orientation for HTML5 Range Sliders

When creating a form input slider, customizing its orientation can be essential for specific UI designs. While controls provide horizontal sliders by default, this article explores techniques to display them vertically in browsers that support the feature.

Modern Browsers (Chrome, Firefox)

For recent versions of Chrome and Firefox, the following CSS style can be applied to achieve vertical orientation:

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

Older Chrome Browsers

For older versions of Chrome and other Chromium-based browsers, use the appearance property:

<code class="css">input[type=range] {
    appearance: slider-vertical;
    width: 16px;
}</code>

Legacy Firefox Browsers

In early Firefox versions, adding the orient attribute to the element can force vertical orientation:

<code class="html">
    ...
    <input type="range">
    ...
</code>

Example Code

Here's a full example combining all the techniques for cross-browser compatibility:

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

input[type=range]:not([orient=vertical]) {
    appearance: slider-vertical;
    width: 16px;
}</code>

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

By implementing these techniques, you can effectively display vertical range sliders to enhance your form UI designs across multiple browsers with optimal compatibility.

The above is the detailed content of How to Create Vertical Range Sliders in HTML5: A Cross-Browser Guide. For more information, please follow other related articles on the PHP Chinese website!