h5自定義滾動條並監聽事件
阿新 • • 發佈：2019-01-25
程式碼加註釋如下所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.container{
margin: 100px auto;
text-align: center;
}
/*取消軌道樣式*/
input[type=range] {
-webkit-appearance: none;
width: 300px;
border-radius: 10px;
}
/*取消滑塊樣式*/
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
/*設定滑塊樣式*/
height: 25px;
width: 25px;
margin-top: -5px; /*使滑塊超出軌道部分的偏移量相等*/
background: #ffffff;
border-radius: 50%; /*外觀設定為圓形*/
border: solid 0.125em rgba(205, 224, 230, 0.5); /*設定邊框*/
box-shadow: 0 .125em .125em #3b4547; /*新增底部陰影*/
}
/*自定義軌道樣式*/
input[type=range] {
height: 15px;
width: 300px;
border-radius: 10px;
box-shadow: 0 1px 1px #def3f8, inset 0 .125em .125em #0d1112; /*軌道內建陰影效果*/
background-color: #ccc;
background-image: linear-gradient(to right,#1F548F, #1F548F);
background-repeat: no-repeat;
background-size: 20% 100%;
}
/*原始的控制元件獲取到焦點時，會顯示包裹整個控制元件的邊框，所以還需要把邊框取消。*/
input[type=range]:focus {
outline: none;
}
</style>
</head>
<body>
<div class="container">
<p>這裡顯示進度條的值</p>
<button class="reduce">-</button>
<input type="range" max="99" min="19" step="1" value="30">
<button class="add">+</button>
</div>
<script>
var sliderBar = document.getElementsByTagName('input')[0];
var reduceBtn = document.getElementsByClassName('reduce')[0];
var addBtn = document.getElementsByClassName('add')[0];
var pEle = document.getElementsByTagName('p')[0];
var MINAGE = 19;
var MAxAGE = 99;
// sliderBar.style.width = '300px';
// 監聽 滑動條值的改變
sliderBar.addEventListener('input',function(e){
console.log(e.target.value)
pEle.innerHTML = e.target.value;
sliderBar.style.backgroundSize= (sliderBar.value - MINAGE)/80 * 100 + '% 100%'
})
// 點選 加號
reduceBtn.onclick = function(e){
sliderBar.value = Number(sliderBar.value) -1;
pEle.innerHTML = sliderBar.value -1;
sliderBar.style.backgroundSize= (sliderBar.value - MINAGE)/80 * 100 + '% 100%'
}
// 點選減號
addBtn.onclick = function(e){
sliderBar.value = Number(sliderBar.value) + 1;
pEle.innerHTML = Number(sliderBar.value) + 1;
sliderBar.style.backgroundSize= (sliderBar.value - MINAGE)/80 * 100 + '% 100%'
}
</script>
</body>
</html>