如何僅使用 HTML 和 CSS 顯示範圍值？

使用 HTML5 輸入類型範圍顯示範圍值

使用範圍滑桿建立網站提供了一種調整值的便捷方法。但是，在文字方塊中顯示目前投影片值以便於參考可能會有所幫助。雖然 jQuery 提供了一個簡單的解決方案，但僅使用 HTML 和 CSS 即可實現此功能。

解決方案：

無需JavaScript 即可輕鬆顯示目前範圍值，實作以下HTML 程式碼：

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

在此程式碼中：

• 元素定義範圍滑桿及其值、最小值和最大值的屬性。
• 每當調整範圍滑桿時，oninput 事件偵聽器都會更新相鄰兄弟輸出元素的值。
• 元素顯示目前範圍值。

利用此方法，您可以輕鬆地在文字方塊中顯示範圍值，而不需要外部腳本。

以上是如何僅使用 HTML 和 CSS 顯示範圍值？的詳細內容。更多資訊請關注PHP中文網其他相關文章！