Як відобразити повзунок введення діапазону вертикально

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

Я знайшов деякі коментарі та посилання, які, схоже, вказують на те, що встановлення висоти, більшої за ширину, призведе до того, що браузер автоматично змінить орієнтацію, але під час мого тестування це працює лише в Opera, яка раніше працювала в Opera, але більше не. Як можна орієнтувати повзунок діапазону HTML5 вертикально?

Спочатку встановіть висоту, більшу за ширину. Теоретично це все, що вам потрібно. Специфікація HTML5 пропонує стільки :

... 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" />

Відмова від відповідальності:

Це рішення базується на поточних реалізаціях браузера ще невизначених або нефіналізованих властивостей CSS. Якщо ви маєте намір використовувати його у своєму коді, будьте готові внести корективи коду, коли виходять новіші версії браузера та завершуються рекомендації w3c.

MDN містить явне попередження проти використання -webkit-appearanceв Інтернеті:

Не використовуйте цю властивість на веб-сайтах: вона не тільки нестандартна, але і її поведінка змінюється від одного браузера до іншого. Навіть ключове слово noneмає однакову поведінку щодо кожного елемента форми в різних браузерах, а деякі взагалі не підтримують його.

Заголовок для демонстрації вертикального повзунка в документації IE помилково вказує, що встановлення висоти, більшої за ширину, відображатиме повзунок діапазону вертикально, але це не працює. У розділі коду він явно не встановлює висоту або ширину, а замість цього використовує writing-mode. writing-modeМайно, що реалізовується IE , дуже надійний. На жаль, значення, визначені в поточному робочому проекті специфікації на момент написання статті, набагато обмеженіші. Якщо майбутні версії IE відмовляться від підтримки bt-lrна користь запропонованих на даний момент vertical-lr(що було б еквівалентноtb-lr ), повзунок відображатиметься догори дном. Швидше за все, майбутні версії розширятьwriting-modeприймати нові значення, а не відмовлятися від підтримки існуючих значень. Але, добре знати, з чим маєш справу.

Ви можете зробити це за допомогою перетворень css, хоча будьте обережні з висотою / шириною контейнера. Також вам може знадобитися розмістити його нижче:

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

<input type="range"/>

або еквівалент тривимірного перетворення:

input[type="range"] {
   transform: rotateZ(270deg);
}

Ви також можете використовувати це для перемикання напрямку слайда, встановивши його на 180 ° або 90 ° для горизонтального або вертикального відповідно.

Не змінюючи положення на абсолютне, див. Нижче. Це також підтримує всі останні браузери.

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

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

для дуже старих браузерів, ви можете використовувати -sand-transform: rotate(10deg);з CSS шкурки

або використовувати

селектор префіксів, наприклад -ms-transform: rotate(270deg);для IE9

.container {
    border: 3px solid #eee;
    margin: 10px;
    padding: 10px;
    float: left;
    text-align: center;
    max-width: 20%
}

input[type=range].range {
    cursor: pointer;
    width: 100px !important;
    -webkit-appearance: none;
    z-index: 200;
    width: 50px;
    border: 1px solid #e6e6e6;
    background-color: #e6e6e6;
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#e6e6e6), to(#d2d2d2));
    background-image: -webkit-linear-gradient(right, #e6e6e6, #d2d2d2);
    background-image: -moz-linear-gradient(right, #e6e6e6, #d2d2d2);
    background-image: -ms-linear-gradient(right, #e6e6e6, #d2d2d2);
    background-image: -o-linear-gradient(right, #e6e6e6, #d2d2d2)
}

input[type=range].range:focus {
    border: 0 !important;
    outline: 0 !important
}

input[type=range].range::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 10px;
    height: 10px;
    background-color: #555;
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#4ddbff), to(#0cf));
    background-image: -webkit-linear-gradient(right, #4ddbff, #0cf);
    background-image: -moz-linear-gradient(right, #4ddbff, #0cf);
    background-image: -ms-linear-gradient(right, #4ddbff, #0cf);
    background-image: -o-linear-gradient(right, #4ddbff, #0cf)
}

input[type=range].round {
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px
}

input[type=range].round::-webkit-slider-thumb {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -o-border-radius: 5px
}

.vertical-lowest-first {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg)
}

.vertical-heighest-first {
    -webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    transform: rotate(270deg)
}

<div class="container" style="margin-left: 0px">
    <br><br>
    <input class="range vertical-lowest-first" type="range" min="0" max="1" step="0.1" value="1">
    <br><br><br>
</div>

<div class="container">
    <br><br>
    <input class="range vertical-heighest-first" type="range" min="0" max="1" step="0.1" value="1">
    <br><br><br>
</div>


<div class="container">
    <br><br>
    <input class="range vertical-lowest-first round" type="range" min="0" max="1" step="0.1" value="1">
    <br><br><br>
</div>


<div class="container" style="margin-right: 0px">
    <br><br>
    <input class="range vertical-heighest-first round" type="range" min="0" max="1" step="0.1" value="1">
    <br><br><br>
</div>

Джерело: http://twiggle-web-design.com/tutorials/Custom-Vertical-Input-Range-CSS3.html

Це дуже просто. Я реалізував використання -webkit-appearance: slider-vertical, це працювало в chorme, Firefox, Edge

<input type="range">

input[type=range]{
    writing-mode: bt-lr; /* IE */
    -webkit-appearance: slider-vertical; /* WebKit */
    width: 50px;
    height: 200px;
    padding: 0 24px;
    outline: none;
    background:transparent;
}