kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …

Wert eines <input type=“range“>-Sliders mit JavaScript auslesen und 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.

Workshops und Seminare von kulturbanause

Unsere Berlin-Termine für Ende 2017 sind online!

Jetzt Tickets sichern!

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;
  });
});

Beispiel anschauen

Jetzt bist du gefragt!

Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freuen wir uns auf deinen Kommentar.

Du kannst diesen Beitrag natürlich auch weiterempfehlen. Wir sind dir für jede Unterstützung dankbar!

Das könnte dich auch interessieren

Kommentar verfassen

Dieser Blog lebt vom Feedback der Besucher! Also los, mach mit!
Bitte habe Verständnis dafür, dass Kommentare die mit dem Inhalt dieses Beitrags nichts zu tun haben, gelöscht werden.