Home > Article > Web Front-end > How to Create Vertical Range Sliders in HTML5: A Cross-Browser Guide

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

DDDOriginal: 2024-10-27 01:10:30700browse

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"><html orient="vertical">
    ...
    <input type="range" />
    ...
</html></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!

html5 firefox css chrome html for while Attribute Property default this display input ui

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：Here are a few title options, focusing on the question of combining `:after` and `:hover`: Option 1 (Direct & Concise): * How to Create a Hovering Arrow using :after and :hover in CSS? Option 2Next article：Here are a few title options, focusing on the question of combining `:after` and `:hover`: Option 1 (Direct & Concise): * How to Create a Hovering Arrow using :after and :hover in CSS? Option 2

See more

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

Related articles