Comment afficher un curseur d'entrée de plage verticalement

Je voudrais afficher un <input type="range" />contrôle de curseur verticalement. Je ne suis concerné que par les navigateurs prenant en charge le contrôle du curseur de plage.

J'ai trouvé des commentaires et des références qui semblent indiquer que définir une hauteur supérieure à la largeur entraînera le navigateur pour changer l'orientation automatiquement, mais dans mes tests, cela ne fonctionne que dans Opera utilisé pour fonctionner dans Opera, mais plus maintenant. Comment puis-je orienter verticalement un curseur de plage HTML5?

Tout d'abord, définissez une hauteur supérieure à la largeur. En théorie, c'est tout ce dont vous avez besoin. La spécification HTML5 le suggère :

... l'UA a déterminé l'orientation du contrôle à partir du rapport entre les propriétés de hauteur et de largeur spécifiées dans la feuille de style.

Opera l'avait implémenté de cette façon, mais Opera utilise maintenant WebKit Blink . À ce jour, aucun navigateur n'implémente de curseur vertical basé uniquement sur la hauteur supérieure à la largeur.

Quoi qu'il en soit, il est nécessaire de définir une hauteur supérieure à la largeur pour que la mise en page soit correcte entre les navigateurs. L'application d'un rembourrage gauche et droit aidera également à la mise en page et au positionnement.

Pour Chrome, utilisez -webkit-appearance: slider-vertical.

Pour IE, utilisez writing-mode: bt-lr.

Pour Firefox, ajoutez un orient="vertical"attribut au html. Dommage qu'ils l'aient fait de cette façon. Les styles visuels doivent être contrôlés via CSS, pas 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" />

Avis de non-responsabilité:

Cette solution est basée sur les implémentations actuelles du navigateur de propriétés CSS non encore définies ou non finalisées. Si vous avez l'intention de l'utiliser dans votre code, préparez-vous à effectuer des ajustements de code à mesure que de nouvelles versions de navigateur sont publiées et que les recommandations w3c sont terminées.

MDN contient un avertissement explicite contre l'utilisation -webkit-appearancesur le Web:

N'utilisez pas cette propriété sur les sites Web: non seulement elle n'est pas standard, mais son comportement change d'un navigateur à l'autre. Même le mot-clé nonen'a pas le même comportement sur chaque élément de formulaire sur différents navigateurs, et certains ne le prennent pas du tout en charge.

La légende de la démonstration du curseur vertical dans la documentation IE indique à tort que le réglage de la hauteur supérieure à la largeur affichera un curseur de plage verticalement, mais cela ne fonctionne pas . Dans la section de code , il ne définit clairement ni la hauteur ni la largeur, mais utilise à la place writing-mode. La writing-modepropriété, telle qu'implémentée par IE , est très robuste. Malheureusement, les valeurs définies dans le projet de travail actuel de la spécification au moment de la rédaction de cet article sont beaucoup plus limitées. Si les futures versions d'IE abandonnent le support de bt-lren faveur de l'actuel proposé vertical-lr(qui serait l'équivalent de tb-lr), le curseur s'afficherait à l'envers. Très probablement, les futures versions étendraient lawriting-modepour accepter de nouvelles valeurs plutôt que de supprimer la prise en charge des valeurs existantes. Mais, il est bon de savoir à quoi vous avez affaire.

Vous pouvez le faire avec des transformations css, mais faites attention à la hauteur / largeur du conteneur. Vous devrez peut-être également le positionner plus bas:

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

<input type="range"/>

ou l'équivalent de la transformation 3D:

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

Vous pouvez également l'utiliser pour changer la direction de la diapositive en la réglant sur 180 degrés ou 90 degrés pour l'horizontale ou la verticale respectivement.

Sans changer la position en absolue, voir ci-dessous. Cela prend également en charge tous les navigateurs récents.

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

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

pour les navigateurs très anciens, vous pouvez utiliser -sand-transform: rotate(10deg);du papier de verre CSS

Ou utiliser

sélecteur de préfixe comme -ms-transform: rotate(270deg);pour 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>

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

C'est très simple. J'avais implémenté en utilisant -webkit-appearance: slider-vertical, cela fonctionnait sous 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;
}