Slider bar (barre de défilement, curseur) horizontal et vertical

Soyez le premier à donner votre avis sur cette source.

Vue 3 564 fois - Téléchargée 730 fois

Description

Bonjour,

Exemple d'utilisation de l'input de type "range" pour créer une entrée interactive.
Le slider vertical nécessite en plus une transformation de -90 degrés.
Cela ne se fait pas de la même mamière dans les différents navigateurs:
-ms-transform:rotate(-90deg); /* pour IE */
-webkit-transform:rotate(-90deg); /* pour Safari */
transform:rotate(-90deg); /* Standard syntax */

  <div style='left:40px; top:10px; width:250px; height:20px; background:green'>
    <input id='InG' type='range' min='0' max='255' oninput='Draw()'
      style='left:5px; top:0px'>
  </div>

  <div style='left:10px; top:40px; width:20px; height:250px; background:red'>
    <input id='InR' type='range' min='0' max='255' oninput='Draw()'
      style='left:-110px; top:110px; -ms-transform:rotate(-90deg);
        -webkit-transform:rotate(-90deg); transform:rotate(-90deg)'>
  </div>

  <div style='left:300px; top:40px; width:20px; height:250px; background:#8888FF'>
    <input id='InB' type='range' min='0' max='255' oninput='Draw()'
      style='left:-110px; top:110px; -ms-transform:rotate(-90deg);
        -webkit-transform:rotate(-90deg); transform:rotate(-90deg)'>
  </div>
Le programme réagit "en continu" lors de la manipulation des sliders.
Si cela n'est pas nécessaire, on peut remplacer les mots
oninput par onchange
dans les <input> de id='InR', id='InG', id='InB':
  <div style='left:40px; top:10px; width:250px; height:20px; background:green'>
    <input id='InG' type='range' min='0' max='255' onchange='Draw()'
      style='left:5px; top:0px'>
  </div>

  <div style='left:10px; top:40px; width:20px; height:250px; background:red'>
    <input id='InR' type='range' min='0' max='255' onchange='Draw()'
      style='left:-110px; top:110px; -ms-transform:rotate(-90deg);
        -webkit-transform:rotate(-90deg); transform:rotate(-90deg)'>
  </div>

  <div style='left:300px; top:40px; width:20px; height:250px; background:#8888FF'>
    <input id='InB' type='range' min='0' max='255' onchange='Draw()'
      style='left:-110px; top:110px; -ms-transform:rotate(-90deg);
        -webkit-transform:rotate(-90deg); transform:rotate(-90deg)'>
  </div>
Dans ce cas, le logiciel ne répond que lorsqu'on lâche le bouton de la souris.


Testé avec les dernières versions des navigateurs:
Chrome, Firefox, Opera, Safari (voir images jpg)
Ne fonctionne pas correctement avec IE !
Je ne l'ai pas testé avec Edge.

Bonne lecture ...

Codes Sources

A voir également

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.