Schuifregelaars III: verticaal II

Veel applicaties hebben parameters waarmee de invloed van een of andere grootheid kan worden ingesteld. Als je dat real-time wilt doen (dat wil zeggen dat veranderingen direct zichtbaar zijn), is een schuifregelaar een handig hulpmiddel. Een goed voorbeeld daarvan is de volume-regeling van je geluidsinstallatie.
Een dergelijk hulpmiddel is in HTML5 standaard beschikbaar, zie het item Over <input type=range>, maar het is ook leuk om er zelf een te bouwen.

Op deze bladzijde wordt de kleuraanduiding in HTML als voorbeeld gebruikt. Elke kleur is een mengsel van Rood, Groen en Blauw (RGB). De "aanwezigheid" van elk van die kleuren is een getal tussen 0 en 255.
Een uitgebreid verhaal over kleuren in HTML vind je in het item "Kleurcodes voor tekst, links en achtergrond".

100%
50%
0%
Hiernaast zie je drie schuifregelaars die de RGB-waarde van de achtergrondkleur real-time veranderen.
De linkse regelaar werkt met rood, de middelste werkt met groen en de rechtse is voor blauw. Als je ze verschuift verandert de achtergrond van deze bladzijde van kleur.
Klik op 'Reset' om de originele achtergrondkleur kleur terug te zetten.

In het item Schuifregelaars II: Verticaal, vind je een vrijwel identieke set schuifregelaars. Die werkt precies andersom: 0% bovenaan, 100% onderaan.

Gebruik:

De code ziet er als volgt uit:
 
(Zet dit in de <HEAD> -- volgorde is belangrijk).

<link href="srulev2.css">
De volgende regel is nodig voor het voorbeeld op deze bladzijde. Zie de tekst!
<script src="decihexa.js"></script>
<script src="srulev2.js"></script>
(Zet dit in de <BODY>, op de plaats waar je het nodig hebt).
 
** Regelaar: (maak per regelaar een nieuw volgnummer aan)
De code van de sommige tags is voor de leesbaarheid over twee regels verdeeld.
Het moet in de code van je website op één regel staan!
<div id="V2SPlaceHolder_0" style="position:relative;">
<table border="0" cellspacing="0" cellpadding="0"><tr>
  <td height="127" width="25" align="center" class="V2SliderBar">
  <div id="V2SButtonContainer_0" style="position:absolute; width:18px;
    height:127px; z-index:1; left: 0px; top: 0px;">
<img src="../images/vsrule_b.gif" id="V2SliderButton_0" alt="" border="0"
    class="V2SliderButton"></div></td>
</tr><tr>
  <td height="10" align="center" class="V2SliderBar"></td>
</tr></table></div>
 
<div id="V2SPlaceHolder_1" style="position:relative;">
   <!-- table voor regelaar _1 -->
</div>
.
.
enzovoort

** Reset-knop:
De code van deze tag is voor de leesbaarheid over twee regels verdeeld.
Het moet in de code van je website op één regel staan!

<button type="button" onclick="resetButton2('#E4E9F6')" value="Reset">
Reset</button>

** Initialiseer de regelaars

<script>
  initV2Slider(0,1,0.5,228);
  // aanroep initV2Slider voor regelaar _1
  // enzovoort
</script>

Downloaden:
 
Druk op de knop: Download deze code  File: voorb259.zip, 5084 bytes.

Opmerking:
 
Een vergelijkbare, horizontaal opgebouwde schuifregelaar is beschikbaar. Zie het item "Schuifregelaars I: Horizontaal".
 
Een versie van deze regelaar die precies andersom werkt, is beschikbaar. Zie het item "Schuifregelaars II: Verticaal".

 
terug

html-259; Laatste wijziging: 4 juni 2022