Bagaimana untuk Memaparkan Nilai Slider Julat dalam Kotak Teks Tanpa JavaScript?

Memaparkan Nilai Slider Julat dalam Kotak Teks tanpa JavaScript

Dalam mencipta tapak web menggunakan peluncur julat, keupayaan untuk memaparkan nilai slaid semasa dalam kotak teks boleh menjadi tambahan yang berharga. Walaupun ini kelihatan seperti tugas yang mudah, ia boleh dicapai tanpa menggunakan JavaScript atau jQuery.

Untuk mencapainya, anda boleh memanfaatkan julat jenis input HTML5 dan pendengar acara oninputnya. Dengan memperuntukkan peristiwa oninput kepada input julat, anda boleh memanipulasi nilai elemen keluaran bersebelahan, dengan berkesan mereplikasi gelagat yang diingini.

Pertimbangkan coretan kod berikut:

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

Dalam ini contoh, pengendali peristiwa oninput menetapkan nilai teks elemen output serta-merta mengikut input julat untuk memadankan nilai semasa peluncur julat. Apabila peluncur dilaraskan, nilai yang dipaparkan dikemas kini dalam masa nyata, mencerminkan kefungsian yang biasanya dicapai melalui JavaScript atau jQuery.

Atas ialah kandungan terperinci Bagaimana untuk Memaparkan Nilai Slider Julat dalam Kotak Teks Tanpa JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!