Bagaimana untuk Memaparkan Nilai Julat Hanya Menggunakan HTML dan CSS?

Memaparkan Nilai Julat Menggunakan julat jenis input HTML5

Membuat tapak web dengan peluncur julat menawarkan cara yang mudah untuk melaraskan nilai. Walau bagaimanapun, ia mungkin berfaedah untuk memaparkan nilai slaid semasa dalam kotak teks untuk rujukan yang lebih mudah. Walaupun jQuery menyediakan penyelesaian yang mudah, adalah mungkin untuk mencapai fungsi ini hanya menggunakan HTML dan CSS.

Penyelesaian:

Untuk memaparkan nilai julat semasa tanpa JavaScript dengan mudah, laksanakan kod HTML berikut:

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

Dalam kod ini:

• The elemen mentakrifkan peluncur julat dengan atribut untuk nilai, minimum dan nilai maksimumnya.
• Pendengar acara oninput mengemas kini nilai elemen keluaran adik beradik bersebelahan apabila peluncur julat dilaraskan.
• elemen memaparkan nilai julat semasa.

Menggunakan kaedah ini, anda boleh memaparkan nilai julat dengan mudah dalam kotak teks tanpa memerlukan skrip luaran.

Atas ialah kandungan terperinci Bagaimana untuk Memaparkan Nilai Julat Hanya Menggunakan HTML dan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!