JavaScript - Die Position eines Schiebereglers speichern und auslesen

In diesem Script wird die Position (der Wert) eines Schiebereglers (HTML-Input Typ: Range) mit localStorage() gespeichert. Beim Neu Laden der Seite wieder ausgelesen und in die vorherige Position gesetzt.


<style>

input[type="range"]#slider {
  
accent-colorLightsalmon;
  
margin0 0 5px 0;
  
width275px;
}

datalist#markers {
  
colorLightsalmon;
  
displayflex;
  
flex-directioncolumn;
  
justify-contentspace-between;
  
width275px;
  
writing-modevertical-lr;
}

datalist#markers > option {
  
padding0;
}
</
style>

<
script>
// Die Position eines Schiebereglers speichern und auslesen

window.addEventListener("DOMContentLoaded", () => {

  
let slider document.getElementById("slider");

   if (
window.localStorage.getItem("Storage")) {
     
slider.value window.localStorage.getItem("Storage");
   }

   
slider.addEventListener("input", () => {
     
window.localStorage.setItem("Storage"slider.value);
   });

});
</
script>

<
input type="range" value="50" min="0" max="100" step="25" id="slider" list="markers">

<
datalist id="markers">
  <
option value="0" label="0"></option>
  <
option value="25" label="25"></option>
  <
option value="50" label="50"></option>
  <
option value="75" label="75"></option>
  <
option value="100" label="100"></option>
</
datalist>

Siehe auch: Die Wahl einer Auswahlliste speichern und auslesen

Bausteine  Alle Anzeigen

Eine zufällige Auswahl von Codeschnipseln aus den Bereichen HTML, CSS, PHP, JavaScript und MySQL.

<summary> Überschrift

CSS - Elemente ab einer bestimmten Fensterbreite ausblenden

PHP - Mit PHP eine HTML-Tabelle erstellen

JavaScript - HTML-Tabelle filtern

MySQL - Datenbank-Abfrage über den URL-Parameter