如下为可调节状态：
风量1.jpg
如下为不可调节状态：
风量2.jpg
html文件：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8;no-cache" />
<title>slider</title>
<link type="text/css" href="css/style_copy.css" rel="stylesheet" />
</head>
<body>
<div class="User_ratings" style="margin: auto">
<span style="color:dodgerblue;float: left;font-size: 50px">风量调节</span>
<div style="color:dodgerblue;float: right;font-size: 50px"><span id="title" style="color: black"></span> m³/h</div> <br>
<div class="ratings_bars">
<div class="scale" id="bar"> <!-- 轨道灰色背景 -->
<div id="bgm"></div> <!-- 轨道 -->
<span id="btn"></span> <!-- 滑块 -->
</div>
</div>
</div><br><br><br><br><br><br>
<button id="button" value="open" onclick="changeSlider()">切换按钮状态</button> //button切换可调节和不可调节状态
<script src="slider.js"></script>
</body>
</html>
javascript文件（包含的一些数字是测量的实际image大小，用于计算风量大小、滑块位置等信息）：
var div1 = document.getElementById('btn');
var div2 = document.getElementById('button');
var div3 = document.getElementById('bgm');
function changeSlider() {
if (div2.value == "close") {
div1.style.background = "url(images/3.png)";
div2.value = "open";
div3.style.backgroundColor = "dodgerblue";
} else if (div2.value == "open") {
div1.style.background = "url(images/4.png)";
div2.value = "close";
div3.style.backgroundColor = "grey";
}
}
var num = 10; //默认初始数值为10
var num001 = num / 1.6;
var w = document.getElementById('bar').clientWidth;
var www001 = 3000 / w;
var www002 = 3200 / w;
scale = function (btn, bar, title) {
this.btn = document.getElementById(btn);
this.bar = document.getElementById(bar);
this.title = document.getElementById(title);
this.step = this.bar.getElementsByTagName("DIV")[0];
this.init();
};
scale.prototype = {
init: function () {
var t = this;
var d = document;
this.step.style.width = (num001 + www001) + '%'; //进度条初始位置
this.title.innerHTML = num;//风量数值
this.btn.style.left = (num001 - www002) + '%';//滑块初始位置
t.btn.addEventListener('touchstart', function (e) {
var touchobj1 = e.changedTouches[0];
var x = touchobj1.clientX;
var l = this.offsetLeft;
var z = t.bar.offsetWidth;
d.addEventListener('touchmove', function (e) {
if (div2.value == "open") {
var touchobj2 = e.changedTouches[0];
var thisX = touchobj2.clientX;
var to = Math.min(z, Math.max(0, l + 34 + (thisX - x)));
t.btn.style.left = to - 34 + 'px';
t.ondrag(Math.round(Math.max(0, to / z) * 160), to);
} else {
return false;
}
}, false);
d.addEventListener('touchend', function (e) {
this.touchmove = null;
}, false);
}, false);
},
ondrag : function (pos, x) {
this.step.style.width = Math.max(0, x) + 'px';
this.title.innerHTML = pos + '';
}
};
new scale('btn', 'bar', 'title');
css文件：
@charset "utf-8";/* CSS Document */
body {
padding:0;
background:rgb(235,237,240);
margin-top: 5%;
margin-left: 15%;
margin-right: 15%;
}
.User_ratings .ratings_bars {
margin-top:10px;
width: 100%;
float:left;
}
.User_ratings .ratings_bars .scale {
width:70%;
height:34px;
margin:3% 0 0 0 ;
position:absolute;
background-color: #bfbebe;
box-shadow: 0 1px 1px #def3f8, inset 0 .125em .125em #0d1112,0 0 0 10px #bfbebe;
background-size: 100% 33px;
border-radius: 25px;
}
.User_ratings .ratings_bars .scale div {
position:absolute;
height:34px;
background-color: dodgerblue;
box-shadow: 0 1px 1px #def3f8, inset 0 .125em .125em #0d1112;
background-size:100% 30px;
border-radius: 25px;
}
.User_ratings .ratings_bars .scale span {
width:68px;
height:68px;
position:absolute;
top:-20px;
cursor:pointer;
background:url(../images/3.png) no-repeat;
}
