Jak wyświetlić suwak wprowadzania zakresu w pionie


90

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?

Odpowiedzi:


134

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.


2
+1 za zastrzeżenie dotyczące -webkit-appearance- tego nie wiedziałem. Zmienia wszystko.
Robin Winslow,

Element wejściowy z type = "range" w IE jest bardzo wrażliwy na szerokość / wysokość / wartości wyświetlania. Podczas korzystania z Bootstrap niektóre z tych wartości mogą zostać nieumyślnie nadpisane (zwłaszcza jeśli nie używasz ogólnego css, jak w odpowiedzi). Dla jednego z moich zakresów pionowych używam css w ten sposób: .vert {-ms-writing-mode: bt-lr; / * IE / -webkit-look: slider-vertical; / WebKit * / height: 210px; szerokość: 20px! ważne; wypełnienie: 0 5px; display: inline-block! ważne; }
mp31415

1
Na pewno nie jestem fanem !important. Zawsze lepiej jest wzmocnić swój wybór. Zamiast po prostu .vertużyj czegoś takiego jak input[type=range].vert.
gilly3

74

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.


2
Zauważ, że musisz ustawić go na 270, jeśli chcesz, aby odpowiadał wyższym wartościom, które zwiększasz, a niższym wartościom, spadkom. Zredagowałeś swoją odpowiedź.
sierpień

1
Wolę to podejście, ponieważ obsługuje niestandardowe style CSS. W innym podejściu niestandardowa stylizacja sprawia, że ​​suwak działa zabawnie
Kim T

1
To proste, ale genialne
Christopher M.

Zamiast pozycji: bezwzględna możesz użyć display: inline-block; z transformacji pochodzenia.
Denis Giffeler

@DenisGiffeler pozycja bezwzględna nie jest tak naprawdę częścią tego rozwiązania, jest po prostu wygodnym sposobem, aby przykład SO wyświetlał się poprawnie. Istnieje wiele sposobów ustalenia pozycji w zależności od przypadku użycia.
MaxPRafferty

25

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


uwzględnij także coś takiego, jak transform-origin: center left;suwak wyjustowany do lewej, a nie do środka.
DragonLord

3

.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


Link do źródła zawiera demo pokazujące różne suwaki z różnymi stylami obróbki.
Josh Habdas

0

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;
}
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.