So zeigen Sie einen Schieberegler für die Bereichseingabe vertikal an

Ich möchte einen <input type="range" />Schieberegler vertikal anzeigen . Ich beschäftige mich nur mit Browsern, die die Steuerung des Bereichsschiebereglers unterstützen.

Ich habe einige Kommentare und Verweise gefunden, die darauf hindeuten, dass das Einstellen der Höhe größer als die Breite dazu führt, dass der Browser die Ausrichtung automatisch ändert. In meinen Tests funktioniert dies jedoch nur in Opera, das früher in Opera funktioniert hat, aber nicht mehr. Wie kann ich einen HTML5-Bereichsregler vertikal ausrichten?

Stellen Sie zuerst die Höhe größer als die Breite ein. Theoretisch ist dies alles, was Sie brauchen sollten. Die HTML5-Spezifikation schlägt Folgendes vor :

... bestimmte die UA die Ausrichtung des Steuerelements aus dem Verhältnis der vom Stylesheet angegebenen Höhen- und Breiteneigenschaften.

Opera hatte es auf diese Weise implementiert, aber Opera verwendet jetzt WebKit Blink . Bis heute implementiert kein Browser einen vertikalen Schieberegler, der ausschließlich darauf basiert, dass die Höhe größer als die Breite ist.

Unabhängig davon ist es erforderlich, die Höhe größer als die Breite einzustellen, um das richtige Layout zwischen den Browsern zu erzielen. Das Anwenden der linken und rechten Polsterung hilft auch beim Layout und bei der Positionierung.

Verwenden Sie für Chrome -webkit-appearance: slider-vertical.

Verwenden Sie für IE writing-mode: bt-lr.

Fügen Sie für Firefox orient="vertical"dem HTML- Code ein Attribut hinzu. Schade, dass sie es so gemacht haben. Visuelle Stile sollten über CSS und nicht über HTML gesteuert werden.

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

Haftungsausschluss:

Diese Lösung basiert auf aktuellen Browser-Implementierungen von noch nicht definierten oder nicht finalisierten CSS-Eigenschaften. Wenn Sie beabsichtigen, es in Ihrem Code zu verwenden, müssen Sie Code-Anpassungen vornehmen, wenn neuere Browserversionen veröffentlicht und die Empfehlungen von w3c abgeschlossen werden.

MDN enthält eine explizite Warnung vor der Verwendung -webkit-appearanceim Web:

Verwenden Sie diese Eigenschaft nicht auf Websites: Sie ist nicht nur nicht standardisiert, sondern ihr Verhalten ändert sich auch von einem Browser zum anderen. Sogar das Schlüsselwort nonehat nicht das gleiche Verhalten für jedes Formularelement in verschiedenen Browsern, und einige unterstützen es überhaupt nicht.

Die Beschriftung für die Demo des vertikalen Schiebereglers in der IE-Dokumentation zeigt fälschlicherweise an, dass beim Festlegen einer Höhe über der Breite ein Bereichsschieberegler vertikal angezeigt wird. Dies funktioniert jedoch nicht . Im Codeabschnitt wird weder Höhe noch Breite festgelegt, sondern stattdessen verwendet writing-mode. Die vom IE implementiertewriting-mode Eigenschaft ist sehr robust. Leider sind die Werte, die im aktuellen Arbeitsentwurf der Spezifikation zum Zeitpunkt dieses Schreibens definiert sind, viel begrenzter. Sollten zukünftige Versionen des IE die Unterstützung zugunsten des derzeit vorgeschlagenen (was dem entspricht ) fallen lassen, wird der Schieberegler verkehrt herum angezeigt. Höchstwahrscheinlich würden zukünftige Versionen diebt-lrvertical-lrtb-lrwriting-modeneue Werte zu akzeptieren, anstatt die Unterstützung für vorhandene Werte zu streichen. Aber es ist gut zu wissen, womit Sie es zu tun haben.

Sie können dies mit CSS-Transformationen tun, achten Sie jedoch auf die Höhe / Breite des Containers. Möglicherweise müssen Sie es auch tiefer positionieren:

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

<input type="range"/>

oder das 3D-Transformationsäquivalent:

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

Sie können dies auch verwenden, um die Richtung der Folie zu ändern, indem Sie sie für horizontal oder vertikal auf 180 Grad oder 90 Grad einstellen.

Ohne die Position auf absolut zu ändern, siehe unten. Dies unterstützt auch alle aktuellen Browser.

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

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

für sehr alten Browser, können Sie -sand-transform: rotate(10deg);von CSS Schmirgelpapier

oder verwenden

Präfixauswahl wie -ms-transform: rotate(270deg);für 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>

Quelle: http://twiggle-web-design.com/tutorials/Custom-Vertical-Input-Range-CSS3.html

Es ist sehr einfach. Ich hatte implementiert -webkit-appearance: slider-vertical, es funktionierte in 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;
}