L'affichage de la gamme d'entrée curseur verticalement

Je voudrais afficher une <input type="range" /> de contrôle du curseur verticalement. Je suis intéressée uniquement avec les navigateurs qui prennent en charge la gamme de contrôle du curseur.

J'ai trouvé des commentaires et des références qui semblent indiquer que le réglage de la hauteur supérieure à la largeur entraîne le navigateur pour modifier l'orientation automatiquement, mais dans mes tests, que seuls les fonctionne sous Opera l'habitude de travailler dans l'Opéra, mais pas plus. Comment puis-je orienter un HTML5 curseur de plage verticale?

InformationsquelleAutor gilly3 | 2013-04-10
  1. 105

    Tout d'abord, régler la hauteur plus grande que la largeur. En théorie, c'est tout ce dont vous aurez besoin. Le HTML5 Spec suggère que beaucoup:

    ... l'UA a déterminé l'orientation de la commande à partir du rapport de la feuille de style spécifié propriétés height et width.

    L'opéra avait mise en œuvre de cette façon, mais l'Opéra est maintenant à l'aide de WebKit Blink. À compter d'aujourd'hui, aucun navigateur n'implémente une barre de défilement verticale basée uniquement sur la hauteur étant plus grande que la largeur.

    Peu importe, réglage de la hauteur plus grande que la largeur est nécessaire pour obtenir le droit de disposition entre les navigateurs. L'application à gauche et à droite de rembourrage contribueront également à la mise en page et positionnement.

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

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

    Pour Firefox, ajouter un orient="vertical" attribut html. Dommage qu'ils n'ont cela de cette façon. Les styles visuels doit être contrôlée via CSS, pas en HTML.

    CSS:

    input[type=range][orient=vertical]
{
    writing-mode: bt-lr; /* IE */
    -webkit-appearance: slider-vertical; /* WebKit */
    width: 8px;
    height: 175px;
    padding: 0 5px;
}

    HTML:

    <input type="range" orient="vertical" />

    Dénis:

    Cette solution est basée sur navigateur actuel implémentations de encore mal définie ou non des propriétés CSS. Si vous avez l'intention de l'utiliser dans votre code, être préparé afin de rendre le code ajustements que de nouvelles versions des navigateurs sont libérés et les recommandations du w3c sont terminés.

    MDN contient une mise en garde explicite contre l'utilisation de -webkit-appearance sur le web:

    Ne pas utiliser cette propriété sur des sites Web de: non seulement est-il non-standard, mais son changement de comportement à partir d'un navigateur à l'autre. Même le mot-clé none n'a pas le même comportement sur chaque élément de formulaire sur les différents navigateurs, et certains ne le supporte pas du tout.

    La légende de la barre de défilement verticale de démonstration dans le IE de la documentation indique à tort que le réglage en hauteur plus grande que la largeur de l'affichage d'un curseur de plage à la verticale, mais cela ne pas travail. Dans le code de l'article, c'est évident, ne pas régler la hauteur ou la largeur, et utilise à la place writing-mode. Le writing-mode propriété, mis en place par IE, est très robuste. Malheureusement, les valeurs définies dans le travail en cours-projet de la spec de cette écriture, sont beaucoup plus limitées. Devrait les futures versions de IE chute de soutien de bt-lr en faveur de la actuellement proposée vertical-lr (ce qui serait l'équivalent de tb-lr), le curseur affiche à l'envers. Le plus probable, les futures versions de proroger le writing-mode à accepter de nouvelles valeurs, plutôt que de déposer, pour les valeurs existantes. Mais, il est bon de savoir de quoi il s'agit.

    • +1 pour l'avertissement sur -webkit-appearance - je ne le savais pas. Ça, ça change tout.
    • Élément Input type="range" dans l'IE est très sensible à la largeur/hauteur/affichage des valeurs. Lors de l'utilisation de Bootstrap certaines de ces valeurs peuvent être écrasé par inadvertance (surtout si vous n'utilisez pas de couverture de css comme dans la réponse). Pour l'un de mes verticale plages-je utiliser les css comme ceci: .vert { -ms-writing-mode: bt-rc; /* IE / -webkit-appearance: curseur vertical; / WebKit */ height: 210px; width: 20px !important; padding: 0 5px; display: inline-block !important; }
    • Je ne suis certainement pas un fan de !important. Il est toujours préférable de renforcer votre sélection. Au lieu de simplement .vert, utilisez quelque chose comme input[type=range].vert.
    InformationsquelleAutor gilly3
  2. 60

    Vous pouvez le faire avec du css transforme, mais être prudent avec les conteneur hauteur/largeur. Aussi, vous pouvez avoir besoin de le positionner en bas:

    CSS:

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

    HTML:

    <input type="range"/>

    ou la transformation 3d équivalent:

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

    Vous pouvez également l'utiliser pour changer la direction de la diapositive par la mise à 180deg ou 90deg à l'horizontale ou à la verticale, respectivement.

    • Remarque vous devez le faire à 270 si vous voulez correspondre avec des valeurs plus vous allez vers le haut et bas de valeurs que vous allez vers le bas. La modification de votre réponse.
    • Je préfère cette approche, qui prend en charge css personnalisé style. Avec l'autre approche, le style personnalisé rend le curseur de la loi drôle
    • C'est simple mais génial
    • C'est beaucoup mieux que la accepté de répondre à
    InformationsquelleAutor MaxPRafferty
  3. 19

    Sans changer de position à l'absolu, voir ci-dessous. Cela prend en charge tous les navigateurs récents ainsi.

    CSS:

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

    HTML:

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

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

    ou de l'utilisation

    préfixe sélecteur comme -ms-transform: rotate(270deg); pour IE9

    InformationsquelleAutor Ifeanyi Chukwu
  4. 2

    CSS:

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

    HTML:

    <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

    • Lien Source comprend démo montrant les différents curseurs avec différents style de traitements.
    InformationsquelleAutor Mahdi Bashirpour