Slider bar (barre de défilement, curseur) horizontal et vertical
Soyez le premier à donner votre avis sur cette source.
Vue 4 682 fois - Téléchargée 775 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 */
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':
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 ...
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
- Slide bar html
- Html slider bar - Meilleures réponses
- Slider bar html - Meilleures réponses
- Flash : Slide bar :: menu glissant en fonction de la souris - CodeS SourceS - Guide
- Javascript : Scroll bars en javascript sur une page html - CodeS SourceS - Guide
- Tableau php html - Conseils pratiques - PHP
- Exemple de code html page d'accueil ✓ - Forum - Graphisme/design
- Html architecture - Conseils pratiques - Javascript
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.