Как отображать ползунок ввода диапазона по вертикали

Я хотел бы отобразить элемент управления <input type="range" /> ползунка вертикально. Я занимаюсь только браузерами, которые поддерживают управление ползунком диапазона.

Я нашел несколько комментариев и ссылок, которые, по-видимому, указывают на то, что установка высоты больше ширины приведет к тому, что браузер автоматически изменит ориентацию, но в моем тестировании работает только ~~в Opera~~ привыкший работать в Opera, но больше не работает. Как я могу ориентировать ползунок диапазона HTML5 по вертикали?

Ответы

Ответ 1

Сначала установите высоту больше ширины. Теоретически это все, что вам нужно. HTML5 Spec предлагает как можно больше:

... UA определил ориентацию элемента управления по отношению к параметрам высоты и ширины, заданных в стиле листа.

Opera реализовала этот способ, но Opera теперь использует ~~WebKit~~ Blink. На сегодняшний день ни один браузер не использует вертикальный слайдер, основанный исключительно на высоте, большей ширины.

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

Для Chrome используйте -webkit-appearance: slider-vertical.

Для IE используйте writing-mode: bt-lr.

Для Firefox добавьте атрибут orient="vertical" в html. Жаль, что они сделали это так. Визуальные стили должны управляться с помощью CSS, а не HTML.

input[type=range][orient=vertical]
{
    writing-mode: bt-lr; /* IE */
    -webkit-appearance: slider-vertical; /* WebKit */
    width: 8px;
    height: 175px;
    padding: 0 5px;
}

<input type="range" orient="vertical" />

Ответ 2

Вы можете сделать это с помощью css-преобразований, хотя будьте осторожны с высотой/шириной контейнера. Также вам может потребоваться установить его ниже:

input[type="range"] {
   position: absolute;
   top: 40%;
   transform: rotate(270deg);
}

<input type="range"/>

Ответ 3

Без изменения положения на абсолютное, см. ниже. Это также поддерживает все последние браузеры.

.vranger {
  margin-top: 50px;
   transform: rotate(270deg);
  -moz-transform: rotate(270deg); /*do same for other browsers if required*/
}

<input type="range" class="vranger"/>