Range Schieberegler

Zitat von Dani_T

Kern der Seite: In der Mitte der Homepage sollte ein Schieberegler sein, bei dem man eine Range von 0 bis 100 einstellen kann. Dabei soll es auf 0, 25, 50, 75 und 100 einrasten. Bei jedem Feld soll rechts davon je ein anderer Text mit Bild sowie ein Button erscheinen der zu einer Unterseite führt.

Für jede der 5 Auswahlmöglichkeiten soll es je eine andere Unterseite geben.

Habt ihr eine Idee wie ich das anstellen kann?

du erstellst dir einfach ein Seiten - Template mit der benötigten Funktion "Kern der Seite: In der Mitte der Homepage sollte ein Schieberegler sein"

oder du erstellst dir über deine letzten 5 Beiträge ein Plugin, was deine gewünschte Darstellung abbilden kann.

<input type=“range” min=“0” max=“100” step=“25” value=“0”>

Dieser Code erstellt einen Schieberegler, der von 0 bis 100 geht und auf 0, 25, 50, 75 und 100 einrastet. Du kannst den aktuellen Wert des Schiebereglers mit JavaScript auslesen oder anzeigen, indem du ein Ereignis wie onchange oder oninput verwendest.

<input id=“slider” type=“range” min=“0” max=“100” step=“25” value=“0” oninput=“showValue(this.value)”> <span id=“value”>0</span> <script> function showValue(value) { document.getElementById(“value”).textContent = value; } </script>

Dieser Code zeigt den aktuellen Wert des Schiebereglers in einem span-Element an, wenn der Benutzer den Schieberegler bewegt.

HTML input type = range | mediaevent.de

Du kannst auch eine JavaScript-Bibliothek wie noUiSlider verwenden, um einen Schieberegler zu erstellen, der mehr Funktionen und Anpassungsmöglichkeiten bietet. Zum Beispiel:

<div id=“slider”></div> <script src=“nouislider.min.js”></script> <script> var slider = document.getElementById(“slider”); noUiSlider.create(slider, { start: 0, step: 25, range: { min: 0, max: 100 } }); slider.noUiSlider.on(“update”, function (values, handle) { console.log(values[handle]); }); </script>

Dieser Code erstellt einen Schieberegler, der von 0 bis 100 geht und auf 0, 25, 50, 75 und 100 einrastet.
HTML/Tutorials/Formulare/input/number – SELFHTML-Wiki

https://refreshless.com/nouislider/

Der in diesem Beitrag gezeigt Code funktioniert nicht - wenn du diesen trotzdem verwenden möchtest, musst du gültige Zeichen für “ und ” finden...