如何顯示 HTML5 範圍輸入控制項的值？

如何在 HTML5 的輸入範圍控制項中顯示範圍值？

使用 HTML5，您可以建立一個範圍滑桿，其值可以輕鬆顯示在文字方塊中。這對於向用戶提供即時回饋特別有用。這是一個利用HTML5 原生功能而不需要JavaScript 或jQuery 的解決方案：

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

以下是程式碼細分：

• min 和 max：定義滑桿的最小值和最大值。
• oninput：每次滑桿值發生變化時都會觸發此事件監聽器。
• nextElementSibling：用於存取輸出元素，它是輸入範圍的相鄰同級元素。
• this.value：表示範圍輸入的目前值。
• < ;output>：此元素顯示範圍輸入的值。

當您滑動範圍輸入時，會觸發 oninput 事件，更新輸出元素的值以反映目前滑動位置。這提供了一個用戶友好的介面，其中滑塊的確切值始終可見。

以上是如何顯示 HTML5 範圍輸入控制項的值？的詳細內容。更多資訊請關注PHP中文網其他相關文章！