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-color: Lightsalmon;
margin: 0 0 5px 0;
width: 275px;
}
datalist#markers {
color: Lightsalmon;
display: flex;
flex-direction: column;
justify-content: space-between;
width: 275px;
writing-mode: vertical-lr;
}
datalist#markers > option {
padding: 0;
}
</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.
<html> HTML
CSS - Container mit Eselsohren
PHP - Koordinaten einer Grafik anzeigen