當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

input type=range标签用法实例代码

發布時間：2025/6/16 编程问答 51 豆豆

生活随笔收集整理的這篇文章主要介紹了 input type=range标签用法实例代码小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

在HTML5中，又新增許多新<input>控件類型，比較實用的一個就是<input type="range">，以滑竿的方式來調整value值，在這以前需要通過模擬才能夠實現，下面就通過代碼實例介紹一下它的作用。

代碼如下:

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29

<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> #demo{ ??width:50px; ??height:50px; ??background:red; } </style> <script type="text/javascript"> window.onload=function(){ ??var demo=document.getElementById("demo"); ??var range=document.getElementById("range"); ??range.onmousemove=function(){ ????demo.style.width=this.value+"px"; ??} } </script> </head> ???? <body> <div id="demo"></div> <input type="range" step="1" max="500" min="10" value="50" id="range"/> </body> </html>

以上代碼可以平滑的拖動空間按鈕來調整div的寬度，大家可以特別注意下此空間的幾個常用屬性，step用來規定，拖動數據變動的最小跨度，max規定最大值，min規定最小值。還有一個要特別注意的點是:實現此平滑拖動效果最好用onmousemove事件，在各個瀏覽器表現都是一致的，使用onchange事件在最新的谷歌和火狐瀏覽器中并不是平滑的。

原文發布時間為：2017-3-7

本文作者：admin

本文來自云棲社區合作伙伴“螞蟻部落”，了解相關信息可以關注螞蟻部落

原文鏈接：<input type="range">標簽用法實例代碼

總結

以上是生活随笔為你收集整理的input type=range标签用法实例代码的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。