Wie zeige ich den Wert eines HTML5-Bereichseingabesteuerelements an?

Wie zeige ich den Bereichswert in einem Eingabebereichssteuerelement in HTML5 an?

Mit HTML5 können Sie einen Bereichsschieberegler erstellen, dessen Wert direkt in einem Textfeld angezeigt wird. Dies ist besonders nützlich, um Benutzern Echtzeit-Feedback zu geben. Hier ist eine Lösung, die die native Funktionalität von HTML5 nutzt, ohne dass JavaScript oder jQuery erforderlich ist:

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

Hier ist eine Aufschlüsselung des Codes:

• min und max: Definieren Sie die minimalen und maximalen Werte für den Schieberegler.
• oninput: Dieser Ereignis-Listener wird jedes Mal ausgelöst, wenn sich der Wert des Schiebereglers ändert.
• nextElementSibling: Wird verwendet, um auf das Ausgabeelement zuzugreifen, das das benachbarte Geschwisterelement des Eingabebereichs ist.
• this.value: Stellt den aktuellen Wert der Bereichseingabe dar.
• < ;output>: Dieses Element zeigt den Wert der Bereichseingabe an.

Während Sie die Bereichseingabe verschieben, wird das oninput-Ereignis ausgelöst, das den Wert des Ausgabeelements aktualisiert, um die aktuelle Folienposition widerzuspiegeln. Dies bietet eine benutzerfreundliche Oberfläche, bei der der genaue Wert des Schiebereglers immer sichtbar ist.

Das obige ist der detaillierte Inhalt vonWie zeige ich den Wert eines HTML5-Bereichseingabesteuerelements an?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!