Bagaimanakah Saya Boleh Memaparkan Nilai Slider dalam Kotak Teks Hanya Menggunakan HTML dan CSS?

Memaparkan Nilai Slider dalam Kotak Teks Menggunakan HTML dan CSS

Dalam aplikasi web, anda mungkin menghadapi keperluan untuk memaparkan nilai semasa secara serentak daripada peluncur julat dalam kotak teks yang sepadan. Walaupun JavaScript atau jQuery merupakan penyelesaian yang popular, anda boleh mencapainya tanpa menggunakan kod luaran.

Untuk memaparkan nilai peluncur dalam kotak teks hanya menggunakan HTML dan CSS, anda boleh memanfaatkan acara oninput dan atribut nilai bagi elemen julat input. Sintaks adalah seperti berikut:

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

Dalam contoh ini, apabila pengguna melaraskan peluncur, sifat this.value akan mengembalikan nilai yang dikemas kini. Pendengar peristiwa oninput memberikan nilai ini kepada sifat nilai elemen output, yang memaparkan nilai peluncur semasa sebagai teks. Oleh itu, apabila peluncur bergerak, nilai dalam kotak teks akan dikemas kini secara dinamik untuk mencerminkan perubahan.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Memaparkan Nilai Slider dalam Kotak Teks Hanya Menggunakan HTML dan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!