Wie zeige ich einen Bereichswert nur mit HTML und CSS an?

Bereichswert mit HTML5-Eingabetypbereich anzeigen

Das Erstellen einer Website mit einem Bereichsschieberegler bietet eine bequeme Möglichkeit, Werte anzupassen. Es kann jedoch von Vorteil sein, den aktuellen Folienwert zur leichteren Bezugnahme in einem Textfeld anzuzeigen. Während jQuery eine unkomplizierte Lösung bietet, ist es möglich, diese Funktionalität nur mit HTML und CSS zu erreichen.

Lösung:

Um den aktuellen Bereichswert mühelos ohne JavaScript anzuzeigen, Implementieren Sie den folgenden HTML-Code:

<input type="range" value="24" min="1" max="100" oninput="this.nextElementSibling.value = this.value">
<output>24</output>

In diesem Code:

• Der Das Element definiert den Bereichsschieberegler mit Attributen für seinen Wert, seine Mindest- und Maximalwerte.
• Der Oninput-Ereignis-Listener aktualisiert den Wert des benachbarten Geschwister-Ausgabeelements, wenn der Bereichsschieberegler angepasst wird.
• Der Das Element zeigt den aktuellen Bereichswert an.

Mit dieser Methode können Sie den Bereichswert einfach in einem Textfeld anzeigen, ohne dass externe Skripte erforderlich sind.

Das obige ist der detaillierte Inhalt vonWie zeige ich einen Bereichswert nur mit HTML und CSS an?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!