input type="range" en html5

Dans un formulaire, le type range permet de générer une barre de choix...
Pour récupérer la valeur effective dans cette barre de choix après déplacement par l'utilisateur, on peut valider le formulaire et transmettre la variable et sa valeur en php avec la méthode post (ou pourquoi pas get).
On peut aussi, et c'est une nouveauté de html5 par rapport aux versions antérieures, utiliser la balise output dans notre formulaire, et ainsi dynamiquement et sans recharger la page, avoir accès à la valeur donnée dans la barre de choix.

Avec php, et la méthode post dans un formulaire

Les pages générées en php sont statiques, cette méthode oblige donc à recharger la page à chaque interaction.
C'est cette méthode qui est utilisée là: cf. taux d'accroisement
Code:

<?php if (isset($_POST['value'])) {$value=$_POST['value'];} else {$value=0;}?>
<form method="post" action="#">
    <fieldset>
    <input style="margin-left:4%;width:82%" type="range" step="0.01" name="value"
    value="" min="-2" max="2" list="accroissement"
    onchange="this.form.submit()" onclick="this.form.submit()">
    <datalist id="accroissement">>
    <option>1.5</option>
    <option>2</option>
    <option>-0.5</option>
    <option>0</option>
    <option>0.5</option>
    <option>1</option>
    <option>1.5</option>
    <option>2</option>
    <datalist>
    <input type="hidden" name="f2wt" value=""/>
    </fieldset>
    </form>

Affichage/Résultat:

value=0

Balise output en html5

La balise output permet d'afficher la valeur d'un formulaire ou le résultat d'un calcul à partir des valeurs saisies dans un formulaire par l'utilisateur.
Code:

<form method="post" action="#" oninput="result.value=Range.value">
    <fieldset>
    <input style="margin-left:4%;width:82%" type="range" step="0.01" name="Range" value="" min="-2" max="2" >
    <br/>
    value=
    <output for="out" name="result"></output>
    </fieldset>
    </form>

Affichage/Résultat:

Range et javascript

Il est bien sûr toujours possible aussi d'utiliser javascript pour gérer les événements qui entourent un objet, de type range entre autre.
Avec les méthodes onchange, et éventuellement onkeyup si on veut aussi permettre à l'utilisateur de manipuler la barre de choix avec les flèches du clavier.
Code:

<form method="post" action="#" onchange="AfficheRange()" onkeyup="AfficheRange()">
 <fieldset>
  <input id="Range" type="range" step="0.01" value="0" min="-2" max="2">
  <span id="AfficheValue">Valeur=0</script></span>
 </fieldset>
</form>
<script>
 function AfficheRange() {
  var R=document.getElementById("Range").value;
  document.getElementById("AfficheValue").innerHTML="Valeur="+R;
}
</script>

Affichage/Résultat:

Code:

<input type="range" value="4" min="-10" max="10" step="2"
   onchange="AfficheRange2(this.value)"
   onkeyup="AfficheRange2(this.value)">
<span id="valBox">Valeur=4</span>
<script>
 function AfficheRange2(newVal){
  document.getElementById("valBox").innerHTML="Valeur="+newVal;
}
</script>

Affichage/Résultat:

Valeur=4