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

88

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?

html  css 
— gilly3
source

Réponses:

131

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" />
Développer l'extrait

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.

— gilly3
source
2
+1 pour l'avertissement à propos de -webkit-appearance- je ne le savais pas. Cela change tout.
— Robin Winslow
L'élément d'entrée avec type = "range" dans IE est très sensible aux valeurs largeur / hauteur / affichage. Lors de l'utilisation de Bootstrap, certaines de ces valeurs peuvent être écrasées par inadvertance (surtout si vous n'utilisez pas de css global comme dans la réponse). Pour l'une de mes plages verticales, j'utilise css comme ceci: .vert {-ms-writing-mode: bt-lr; / * IE / -webkit-aspect: slider-vertical; / WebKit * / hauteur: 210px; largeur: 20px! important; rembourrage: 0 5px; affichage: bloc en ligne! important; }
— mp31415
1
Je ne suis certainement pas fan de !important. Il est toujours préférable de renforcer votre sélecteur. Au lieu de juste .vert, utilisez quelque chose comme input[type=range].vert.
— gilly3
72

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"/>
Développer l'extrait

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.

— MaxPRafferty
source
2
Notez que vous devez en faire un 270 si vous voulez qu'il corresponde à des valeurs plus élevées que vous montez et des valeurs inférieures que vous descendez. Modifié votre réponse.
— août
1
Je préfère cette approche car elle prend en charge le style css personnalisé. Avec l'autre approche, le style personnalisé rend le slider drôle
— Kim T
1
C'est simple mais brillant
— Christopher M.
Au lieu de position: absolue, vous pouvez utiliser display: inline-block; avec transform-origin.
— Denis Giffeler le
@DenisGiffeler la position absolue ne fait pas vraiment partie de cette solution, c'est juste un moyen pratique de faire afficher correctement l'exemple SO. Il existe de nombreuses façons d'accomplir le positionnement en fonction de votre cas d'utilisation.
— MaxPRafferty
22

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"/>
Développer l'extrait

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

— Ifeanyi Chukwu
source
inclure également quelque chose comme transform-origin: center left;avoir le curseur justifié à gauche et non centré.
— 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>
Développer l'extrait

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

— Bashirpour
source
Le lien source comprend une démo montrant divers curseurs avec différents traitements de style.
— Josh Habdas
0

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;
}
— Ashiq Dey
source
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.