1. Accueil
  2. Javascript
  3. Sources Javascript
  4. Sources Graphique
  5. Slider bar (barre de défilement, curseur) horizontal et vertical

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

Soyez le premier à donner votre avis sur cette source.

Vue 3 865 fois - Téléchargée 737 fois

Télécharger le projet
Commenter

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 ...
Télécharger le projet

Codes Sources

A voir également

S'inscrire maintenant

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.

Du même auteur (William VOIROL)