在HTML5之前，為了創(chuàng)造出類似滑塊控件的效果，Web程序員一般是使用JavaScript或Flash來做為解決方案。HTML5的到來省去了Web程序員成百上千行代碼。新出現(xiàn)的input輸入框類型range，(<input type=”range”>)，它的基本模樣就是滑塊控件。而其代碼非常的簡單：
- <input id="test" type="range"/>
以前是IE獨自統(tǒng)天下時，頁面上各種組件的樣式只有一種，而當谷歌瀏覽器、火狐瀏覽器、Safari瀏覽器要和IE平分天下時，你就會發(fā)現(xiàn)頁面上的基本組件中各種瀏覽器中也表現(xiàn)出各自的特點。range類型的輸入框在各種瀏覽器里的外觀也是稍微有些不同，但功能是完全一樣的：
大家看到了，range類型的視覺效果和其他input類型完全不同。
下面讓我們看一下實際演示：
你對HTML5的了解有多少？(程度是1到10)：
input Range類型還有一些非常有趣的其它屬性，你會經(jīng)常的用到它們。
屬性描述
value
跟其它input類型里的value屬性一樣?？梢允钦麛?shù)，也可以是浮點數(shù)。缺省值是最小值和最大值的中間值。
min
范圍的最小值。缺省值是0。
max
范圍的最大值。缺省值是100。
step
步長，滑塊組件滑動時value變動的最小單位。缺省值是1。如果最小值min是浮點數(shù)，step也可以是浮點數(shù)。
list
List就是DataList，但目前為止還沒有瀏覽器實現(xiàn)這個功能。
參照實例演示，你會很容易理解這些屬性的作用。
演示 1. 指定最大值、最小值、步長。
- <input id="slider1" type="range" min="100" max="500" step="10" />
Minimum = 100, Maximum = 500, Step = 10
不要奇怪滑塊組件旁邊的顯示數(shù)字的文本框，它并不是Range輸入框的組成部分，是我為了更好的演示效果而放置的。
演示 2. 設置缺省值。
- <input id="slider2" type ="range" min ="100" max="500" step ="50" value ="100"/>
Minimum = -300, Maximum = 300, Step = 50, Value = 100
演示 3. 下面我們來試一下用浮點數(shù)。
- <input id="slider3" type ="range" min ="-2.5" max="3.0" step ="0.1"/>
Minimum = -2.5, Maximum = 3.0, Step = 0.1
【網(wǎng)站聲明】本站除付費源碼經(jīng)過測試外，其他素材未做測試，不保證完整性，網(wǎng)站上部分源碼僅限學習交流，請勿用于商業(yè)用途。如損害你的權(quán)益請聯(lián)系客服QQ：2655101040 給予處理，謝謝支持。