Range控件是HTML5中新增的控件，很常用珍促，尤其是手機端铃辖。
如何使用？
<!-- HTML Code -->
<input type="range" value="50" id="range"/>
在蘋果設備上的效果還不錯：
默認的range控件
其它的就... 真的還好：
不能忍猪叙，優(yōu)化
大概思路：
- 去除系統(tǒng)默認的樣式
/* CSS Code */
input[type=range] {
-webkit-appearance: none;
width: 100%;
border-radius: 10px; /*這個屬性設置使填充進度條時的圖形為圓角*/
}
input[type=range]:focus {
outline: none;
}
- 給滑動軌道(track)添加樣式
/* CSS Code */
input[type=range]::-webkit-slider-runnable-track {
height: 10px;
}
- 給滑塊(thumb)添加樣式
/* CSS Code */
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
height: 25px;
width: 25px;
margin-top: -8px; /*使滑塊超出軌道部分的偏移量相等*/
background: #ffffff;
border-radius: 50%; /*外觀設置為圓形*/
border: solid 0.125em rgba(205, 224, 230, 0.5); /*設置邊框*/
box-shadow: 0 .125em .125em #3b4547; /*添加底部陰影*/
}
這樣就可以完成一個簡單的Range控件了
美化過的range
以上是樣式部分娇斩，怎么獲取Range控件中的值呢？
于其它input控件一下沐悦，value屬性可以獲取到他的值
//Javascript code
document.getElementById('range').value
完整的頁面代碼就是這樣的：
<html>
<head>
<style>
body{ background:#eee;}
input[type=range] {
-webkit-appearance: none;
width: 100%;
border-radius: 10px; /*這個屬性設置使填充進度條時的圖形為圓角*/
}
input[type=range]:focus {
outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
height: 10px;
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
height: 25px;
width: 25px;
margin-top: -8px; /*使滑塊超出軌道部分的偏移量相等*/
background: #ffffff;
border-radius: 50%; /*外觀設置為圓形*/
border: solid 0.125em rgba(205, 224, 230, 0.5); /*設置邊框*/
box-shadow: 0 .125em .125em #3b4547; /*添加底部陰影*/
}
</style>
<script>
window.onload = function(){
alert(document.getElementById('range').value);
}
</script>
</head>
<body>
<input type="range" value="50" id="range"/>
</body>
</html>
PS:關于Range的其它的一些補充：
屬性說明
| 屬性名 | 描述 |
|---|---|
| max | 設置或返回滑塊控件的最大值 |
| min | 設置或返回滑塊控件的最小值 |
| step | 設置或返回每次拖動滑塊控件時的遞增量 |
| value | 設置或返回滑塊控件的 value 屬性值 |
| defaultValue | 設置或返回滑塊控件的默認值 |
| autofocus | 設置或返回滑塊控件在頁面加載后是否應自動獲取焦點 |
常用事件說明
| 事件名 | 描述 |
|---|---|
| input | 滑塊活動時觸發(fā)的事件 |
| change | 滑塊移動后出發(fā)的事件，一般使用這個事件 |
