Bagaimana untuk Memaparkan Nilai Kawalan Input Julat HTML5?

Bagaimanakah untuk Memaparkan Nilai Julat dalam Kawalan Julat Input dalam HTML5?

Menggunakan HTML5, anda boleh mencipta peluncur julat dengan nilainya yang sedia dipaparkan dalam kotak teks. Ini amat berguna untuk memberikan maklum balas masa nyata kepada pengguna. Berikut ialah penyelesaian yang memanfaatkan kefungsian asli HTML5 tanpa memerlukan JavaScript atau jQuery:

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

Berikut ialah pecahan kod:

• min dan maks: Tentukan nilai minimum dan maksimum untuk peluncur.
• onput: Pendengar acara ini mencetuskan setiap kali nilai peluncur berubah.
• nextElementSibling: Digunakan untuk mengakses elemen output, iaitu adik beradik yang bersebelahan dengan input julat.
• nilai ini: Mewakili nilai semasa input julat.
• : Elemen ini memaparkan nilai input julat.

Semasa anda meluncurkan input julat, peristiwa oninput menyala, mengemas kini nilai elemen output untuk mencerminkan kedudukan slaid semasa. Ini menyediakan antara muka mesra pengguna di mana nilai tepat peluncur sentiasa kelihatan.

Atas ialah kandungan terperinci Bagaimana untuk Memaparkan Nilai Kawalan Input Julat HTML5?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!