Wie kann ich einen Schiebereglerwert in einem Textfeld nur mit HTML und CSS anzeigen?

Anzeigen des Schiebereglerwerts in einem Textfeld mithilfe von HTML und CSS

In einer Webanwendung müssen Sie möglicherweise gleichzeitig den aktuellen Wert anzeigen eines Bereichsschiebereglers in einem entsprechenden Textfeld. Während JavaScript oder jQuery beliebte Lösungen sind, ist es möglich, dies ohne die Verwendung von externem Code zu erreichen.

Um den Schiebereglerwert in einem Textfeld nur mit HTML und CSS anzuzeigen, können Sie das oninput-Ereignis und das value-Attribut des verwenden Eingabebereichselement. Die Syntax lautet wie folgt:

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

Wenn der Benutzer in diesem Beispiel den Schieberegler anpasst, gibt die Eigenschaft this.value den aktualisierten Wert zurück. Der Oninput-Ereignis-Listener weist diesen Wert der Value-Eigenschaft des Ausgabeelements zu, das den aktuellen Schiebereglerwert als Text anzeigt. Daher wird der Wert im Textfeld beim Bewegen des Schiebereglers dynamisch aktualisiert, um die Änderung widerzuspiegeln.

Das obige ist der detaillierte Inhalt vonWie kann ich einen Schiebereglerwert in einem Textfeld nur mit HTML und CSS anzeigen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!