<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1" />
<meta name="format-detection" content="telephone=no, address=no, email=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<title>Document</title>
<style type="text/CSS">
input[type="range"] {
7.407407rem;
height: 0.037037rem;
background-color: #a1a0a0;
position: absolute;
left: 0px;
top: 0rem;
margin: 0px;
margin-top: 1rem;
-webkit-appearance: none;
z-index: 1;
}
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
cursor: default;
background-color: #da4443;
0.351852rem;
height: 0.351852rem;
border-radius: 50%;
}
input.rangeBg[type="range"]{
0rem;
height: 0.037037rem;
background-color: #da4443;
z-index: 10;
}
input.rangeBg[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
cursor: default;
background-color: transparent;
0rem;
height: 0rem;
border-radius: 50%;
}
</style>
</head>
<body>
<input id="range" type="range" value="0" min="0" max="100" onchange="change()" />
<input id="rangeBg" class="rangeBg" type="range" value="0" min="0" max="100"/>
<script>
//获取屏幕的宽度 计算font-size
(function (doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
docEl.style.fontSize = clientWidth / 10 + 'px';
};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
function change() {
var value = document.getElementById('range').value;
var nub = value/100 * document.getElementById('range').offsetWidth;
document.getElementById('rangeBg').style.width = nub + 'px';
}
</script>
</body>
</html>