Wert eines <input type=“range“>-Sliders mit JavaScript auslesen und anzeigen
Von Jonas 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;
});
});Geschrieben von Jonas
Jonas ist Gründer der Agentur kulturbanause und des kulturbanause Blogs. Er arbeitet an der Schnittstelle zwischen UX/UI Design, Frontend und Redaktion und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Jonas Hellwig ist regelmäßig als Sprecher auf Fachveranstaltungen anzutreffen und unterstützt mit Seminaren und Workshops Agenturen und Unternehmen bei der Planung, der Gestaltung und der technischen Umsetzung von Web-Projekten.
