Wert eines <input type=“range“>-Sliders mit JavaScript auslesen und anzeigen
In diesem Beitrag findet ihr den JavaScript-Code um den Wert eines Input Range-Sliders auslesen und auf der Website anzeigen
Das HTML-Formularelement range
ist sehr praktisch um dem Anwender die Möglichkeit zu bieten, Werte mit Hilfe eines Schiebereglers zu verändern. Ohne JavaScript hat der Regler allerdings keine Funktion. In diesem Beitrag archivieren wir das JavaScript-Snippet mit dessen Hilfe die Position des Range-Sliders ausgelesen und auf der Website angezeigt bzw. verwendet werden kann.
HTML-Aufbau des Beispiels
Das Beispiel besteht aus zwei <div>
-Elementen und dem <input type="range">
mit der ID #slider
. Der erste <div>
mit der Klasse .element
soll später mit Hilfe des Schiebereglers verschoben werden. Der zweite <div>
mit der Klasse .range
beinhaltet wiederum ein <span>
-Element mit dem Inhalt 0 (Null). Diesen Inhalte tauschen wir später durch den Wert des Range-Sliders aus.
<div class="element">Dieses Element kann verschoben werden</div>
<div class="range">Du hast das Element um <span>0</span> Pixel verschoben.</div>
<input type="range" id="slider" value="0" min="0" max="100">
JavaScript-Code zum Auslesen des Range-Sliders und zur Manipulation der Elemente
// EventListener hinzufügen
window.addEventListener("load", function(){
// Range-Slider in Variable speichern
var slider = document.querySelector("input[type='range']");
// EventListener für das Verändern des Sliders hinzufügen
slider.addEventListener("change", function(){
// Testelement verschieben, indem Inline-Styles eingefügt werden
document.querySelector(".element").style.transform = "translateX(" + this.value + "px";
// Wert des Range-Sliders anzeigen
document.querySelector(".range span").innerHTML = this.value;
});
});