Beim Erstellen von Internetseiten sind gelegentlich Werteeingaben zu realisieren, die man besser und ergonomischer mit einem Slider als mit einem Texteingabefeld realisieren kann. In HTML5 gibt es jetzt die Möglichkeit, mit dem neuen Input-Typ “range” einen solchen Slider zu realisieren. Der Code dazu hat mehrere Attribute. Mit “min” und “max” wird der Bereich eingegrenzt, mit “value” der Startwert angegeben und “step” bestimmt die Auflösung.
<input min="0" max="50" value="0" step="5" id="slider" name="range" onchange="showValue(this.value)" type="range">
Ein wenig Javascript dazu sorgt dafür, dass hinter dem Slider der jeweils eingestellte Wert angezeigt wird:
<span id="range">0</span><br>
<script type="text/javascript">
function showValue(newValue)
{
document.getElementById("range").innerHTML=newValue;
}
</script>
Wenn statt des Sliders ein einfaches Textfeld mit dem Startwert dahinter angezeigt wird, ist Ihr Browser noch nicht in der Lage, mit dem Input-Typ “range” umzugehen. Probieren Sie es zum Beispiel mit Chrome 21.0.x.
