Jak wyświetlić suwak wprowadzania zakresu w pionie

Chciałbym wyświetlić <input type="range" />suwak w pionie. Martwię się tylko o przeglądarki obsługujące suwak zakresu.

Znalazłem kilka komentarzy i odniesień, które wydają się wskazywać, że ustawienie wysokości większej niż szerokość spowoduje automatyczną zmianę orientacji przeglądarki, ale w moich testach działa to tylko w Operze, która działała w Operze, ale już nie. Jak ustawić suwak zakresu HTML5 w pionie?

Najpierw ustaw wysokość większą niż szerokość. W teorii to wszystko, czego potrzebujesz. HTML5 Spec sugeruje tyle :

... UA określił orientację elementu sterującego na podstawie stosunku właściwości wysokości i szerokości określonych w arkuszu stylów.

Opera ma to zaimplementowane w ten sposób, ale Opera używa teraz WebKit Blink . Na dzień dzisiejszy żadna przeglądarka nie obsługuje pionowego suwaka opartego wyłącznie na wysokości większej niż szerokość.

Niezależnie od tego, ustawienie wysokości większej niż szerokość jest potrzebne, aby uzyskać właściwy układ między przeglądarkami. Zastosowanie lewej i prawej wyściółki również pomoże w ułożeniu i pozycjonowaniu.

W przypadku Chrome użyj -webkit-appearance: slider-vertical.

W przypadku IE użyj writing-mode: bt-lr.

W przypadku przeglądarki Firefox dodaj orient="vertical"atrybut do pliku html. Szkoda, że ​​zrobili to w ten sposób. Style wizualne powinny być kontrolowane przez CSS, a nie 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" />

Zastrzeżenia:

To rozwiązanie jest oparte na aktualnych implementacjach przeglądarek o niezdefiniowanych lub niezakończonych właściwościach CSS. Jeśli zamierzasz użyć go w swoim kodzie, przygotuj się na wprowadzenie poprawek w kodzie w miarę wydawania nowszych wersji przeglądarek i wypełniania zaleceń w3c.

MDN zawiera wyraźne ostrzeżenie przed używaniem -webkit-appearancew sieci:

Nie używaj tej właściwości w witrynach internetowych: nie tylko jest ona niestandardowa, ale jej zachowanie zmienia się z jednej przeglądarki na drugą. Nawet słowo kluczowe nonenie zachowuje się tak samo w każdym elemencie formularza w różnych przeglądarkach, a niektóre w ogóle go nie obsługują.

Podpis pokazujący pionowy suwak w dokumentacji IE błędnie wskazuje, że ustawienie wysokości większej niż szerokość spowoduje wyświetlenie suwaka zakresu w pionie, ale to nie działa. W sekcji kodu po prostu nie ustawia wysokości ani szerokości, a zamiast tego używa writing-mode. writing-modeNieruchomość, jak realizowane przez IE , jest bardzo wytrzymała. Niestety, wartości określone w aktualnym roboczym projekcie specyfikacji w chwili pisania tego tekstu są znacznie bardziej ograniczone. Gdyby przyszłe wersje IE porzuciły obsługę bt-lrna rzecz obecnie proponowanej vertical-lr(co byłoby odpowiednikiem tb-lr), suwak byłby wyświetlany do góry nogami. Najprawdopodobniej przyszłe wersje rozszerzą rozszerzeniewriting-modeakceptować nowe wartości zamiast rezygnować z obsługi istniejących wartości. Ale dobrze jest wiedzieć, z czym masz do czynienia.

Możesz to zrobić za pomocą transformacji css, ale uważaj na wysokość / szerokość kontenera. Być może będziesz musiał ustawić go niżej:

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

<input type="range"/>

lub odpowiednik transformacji 3D:

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

Możesz również użyć tego do zmiany kierunku slajdu, ustawiając go odpowiednio na 180 stopni lub 90 stopni w poziomie lub w pionie.

Bez zmiany pozycji na bezwzględną, patrz poniżej. Obsługuje to również wszystkie najnowsze przeglądarki.

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

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

dla bardzo starych przeglądarek, można korzystać -sand-transform: rotate(10deg);z CSS papierem ściernym

albo użyj

selektor prefiksu, taki jak -ms-transform: rotate(270deg);dla 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>

Źródło: http://twiggle-web-design.com/tutorials/Custom-Vertical-Input-Range-CSS3.html

To jest bardzo proste. Zaimplementowałem za pomocą -webkit-appearance: slider-vertical, działało w 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;
}