![]()
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<script src="js/mui.min.js"></script>
<link href="css/mui.min.css" rel="stylesheet"/>
<style type="text/css">
/*橫條樣式*/
input[type=range] {
-webkit-appearance: none;/*清除系統默認樣式*/
width: 60%;
margin-left: 20%;
margin-top: 30px;
background: -webkit-linear-gradient(#26a6d3, #26a6d3) no-repeat, #d3d3d3;/*設置左邊顏色爲#26a6d3，右邊顏色爲#d3d3d3*/
background-size: 0% 100%;
height: 5px;
}
/*拖動塊的樣式*/
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;/*清除系統默認樣式*/
height: 13px;
width: 13px;
background: #fff;
border-radius: 50%;
border: solid 1px #ddd;
}
#input_range1 {
background-size: 50% 100%;/*設置默認值爲50的時候，左邊的顏色*/
}
</style>
</head>
<body>
<input id="input_range1" type="range" value="50" min="0" max="100" />
<input id="input_range2" type="range" value="0" min="0" max="100" />
<input id="input_range3" type="range" value="0" min="0" max="100" />
<script type="text/javascript" charset="utf-8">
mui.init();
var input_range2 = document.getElementById("input_range2");
input_range2.value = "20";
input_range2.style.webkitBackgroundSize = input_range2.value+"% 100%";
var rangeList = document.querySelectorAll('input[type="range"]');
for (var i = 0; i < rangeList.length; i++) {
var range = rangeList[i];
range.addEventListener('input',function(e){
this.style.webkitBackgroundSize = this.value+"% 100%";
});
range.addEventListener('touchstart',function(e){//解決在ios上不能點擊改變input value
var min = 100/this.clientWidth;
var x = this.getBoundingClientRect().left;
this.value = min*(e.touches[0].pageX-x);
this.style.webkitBackgroundSize = this.value+"% 100%";
});
}
</script>
</body>
</html>
