Ползунок ввода вертикального диапазона: ориентация и совместимость

В мире веб-разработки вертикальное расположение ползунков может улучшить взаимодействие с пользователем и адаптировать к конкретным макетам . В этой статье рассматриваются методы достижения вертикальной ориентации с помощью слайдера HTML5 с учетом совместимости браузеров и современной реализации.

Изначально считалось, что регулировка высоты и ширины элемента слайдера поможет запускать автоматическую вертикальную ориентацию в поддерживаемых браузерах. Однако тестирование показало, что этот метод больше не является надежным, и разработчикам приходится искать альтернативные решения.

Современный подход

Для текущих версий Chrome и Firefox наиболее эффективное решение. включает использование свойств режима записи и направления:

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

Установка режима записи навертикальный-lr (иливертикальный-rl) меняет направление письма, а направление: rtl (справа налево) гарантирует, что скольжение вверх уменьшит значение, придерживаясь стандартных соглашений.

Поддержка устаревших браузеров

Для более старых версий Chrome и других браузеров на базе Chromium браузеры:

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

Применение внешнего вида: слайдер-вертикальный обеспечивает вертикальную ориентацию, а установка фиксированной ширины выравнивается по ширине по умолчанию, используемой в современных браузерах.

Совместимость с Firefox

Для более старых версий Firefox:

html {
    orient: vertical;
}

Добавление атрибута orient к элементу обеспечивает вертикальную ориентацию всех ползунков на странице.

Подводя итог, эти методы предоставляют надежные методы отображения слайдеры вертикально, обеспечивающие оптимальное взаимодействие с пользователем и визуальную привлекательность в широком диапазоне браузеров.