Comment afficher verticalement un curseur d'entrée de gamme ?

Question

Je voudrais afficher un <input type="range" /> la commande de curseur verticalement. Je ne m'intéresse qu'aux navigateurs qui prennent en charge le contrôle de la barre de défilement.

J'ai trouvé des commentaires et des références qui semblent indiquer qu'en fixant une hauteur supérieure à la largeur, le navigateur changera automatiquement l'orientation, mais dans mes tests, cela n'a été le cas que dans les cas où la hauteur est supérieure à la largeur. œuvre à l'Opéra fonctionnait dans Opera, mais plus maintenant. Comment orienter verticalement un curseur de gamme HTML5 ?

Answer 1

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

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

Opera l'avait implémenté de cette manière, mais Opera utilise maintenant WebKit Clignotement . À ce jour, aucun navigateur ne met en œuvre un curseur vertical basé uniquement sur une hauteur supérieure à la largeur. Et maintenant cette suggestion est en cours d'examen par le WHATWG .

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 remplissage à gauche et à droite facilitera également la mise en page et le positionnement.

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

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

Pour Firefox, ajoutez un orient="vertical" à l'attribut html. Dommage qu'ils l'aient fait de cette façon. Les styles visuels devraient être contrôlés par le biais de CSS, pas de HTML.

input[type=range][orient=vertical]
{
    writing-mode: bt-lr; /* IE */
    -webkit-appearance: slider-vertical; /* Chromium */
    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 des navigateurs, qui n'ont pas encore été mises en œuvre. toujours propriétés CSS non définies ou non finalisées. Si vous avez l'intention de l'utiliser dans votre code, être prêt à faire des ajustements de code à mesure que de nouvelles versions de navigateurs sont publiées et que les recommandations du WHATWG sont complétées. S'abonner à ce problème github pour recevoir des mises à jour lorsqu'ils décideront enfin d'un attribut CSS pour contrôler officiellement l'orientation des diapositives.

MDN contient un avertissement sur l'utilisation -webkit-appearance sur le web :

Note : Si vous souhaitez utiliser cette propriété sur des sites web, vous devez la tester très soigneusement. Bien qu'elle soit prise en charge par la plupart des navigateurs modernes, sa mise en œuvre varie. Dans les navigateurs plus anciens, même le mot-clé none n'a pas le même effet sur tous les éléments de formulaire dans les différents navigateurs, et certains ne le supportent pas du tout. Les différences sont moindres dans les navigateurs les plus récents.

Malgré ces avertissements, cette réponse date maintenant de près de 9 ans, et les conseils restent largement inchangés.

Answer 2

Vous pouvez le faire avec des transformations css, mais faites attention à la hauteur/largeur des conteneurs. Vous devrez peut-être aussi 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 180deg ou 90deg pour l'horizontale ou la verticale respectivement.

Answer 3

Sans changer la position en absolu, voir ci-dessous. Ceci supporte également 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 très anciens navigateurs, vous pouvez utiliser -sand-transform: rotate(10deg); de papier de verre CSS

ou utiliser

un sélecteur de préfixe tel que -ms-transform: rotate(270deg); pour IE9

Answer 4

.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>

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

Answer 5

C'est très simple. J'avais implémenté en utilisant -webkit-appearance: slider-vertical Il a fonctionné dans chrome, 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;
}