Vertical Range Input Slider: Orientation and Compatibility

In the world of web development, presenting sliders vertically can enhance user experience and accommodate specific layouts. This article explores techniques for achieving vertical orientation with an HTML5 slider, considering browser compatibility and modern implementation.

Initially, it was believed that adjusting the height and width of the slider element would trigger automatic vertical orientation in supported browsers. However, testing revealed that this method is no longer reliable, leaving developers seeking alternative solutions.

Modern Approach

For current versions of Chrome and Firefox, the most efficient solution involves utilizing the writing-mode and direction properties:

input[type=range] {
    writing-mode: vertical-lr;
    direction: rtl;
}

Setting writing-mode to vertical-lr (or vertical-rl) flips the writing direction, while direction: rtl (right-to-left) ensures that sliding upwards reduces the value, adhering to standard conventions.

Legacy Browser Support

For older versions of Chrome and other Chromium-based browsers:

input[type=range] {
    appearance: slider-vertical;
    width: 16px;
}

Applying appearance: slider-vertical forces the vertical orientation, and setting a fixed width aligns with the default width used in modern browsers.

Firefox Compatibility

For older versions of Firefox:

html {
    orient: vertical;
}

Adding the orient attribute to the element instigates the vertical orientation for all sliders on the page.

In summary, these techniques provide reliable methods for displaying sliders vertically, ensuring optimal user experience and visual appeal across a wide range of browsers.