<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#wrap{
width: 500px;
height: 10px;
background-color: red;
position: relative;
}
.bar_container{
width: 100%;
height: 100%;
background-color: aqua;
}
.bar_into{
height: 100%;
background-color: black;
/* width: 100px; */
width: 0;
}
.bar_drag{
width: 10px;
height: 10px;
background-color: blue;
position: absolute;
cursor: default;
top: 0;left: 0;
}
.bar_text{
color: black;
margin-top: 50px;
}
.xxx{
/* background-color: red; */
width: 100%;
display: flex;
justify-content: space-between;
cursor: default;
}
</style>
</head>
<body>
<div class="bar_wrap" id="wrap"><!--外包裹元素-->
<div class="bar_container"><!--滑动条-->
<div class="bar_into"></div><!--滑动痕迹-->
</div>
<div class="bar_drag"><!--滑块-->
<div class="bar_text"></div><!--文本-->
</div>
<div class="xxx">
<span>0</span>
<span>100</span>
<span>200</span>
<span>300</span>
<span>400</span>
<span>500</span>
</div>
</div>
</body>
<script>
//获取外包裹元素
var eBarWrap = document.getElementById('wrap');
//获取滑动条
var eBarCon = eBarWrap.getElementsByClassName('bar_container')[0];
//获取滑动痕迹元素
var eBarInto = eBarWrap.getElementsByClassName('bar_into')[0];
//获取滑块
var eBarDrag = eBarWrap.getElementsByClassName('bar_drag')[0];
//获取文本元素
var eBarText = eBarWrap.getElementsByClassName('bar_text')[0];
eBarText.innerHTML = 0;
var nMax = eBarCon.offsetWidth - eBarDrag.offsetWidth;
//滑块添加拖拽事件
eBarDrag.addEventListener('mousedown',function(event){
//初始化鼠标开始拖拽的点击位置
var nInitX = event.clientX;
//初始化滑块位置
var nInitLeft = this.offsetLeft;
//页面绑定鼠标移动事件
document.onmousemove = event=>{
//鼠标移动时取消默认行为，避免选中其他元素或文字
event.preventDefault();
//获取鼠标移动后滑块应该移动到的位置
let nX = event.clientX - nInitX + nInitLeft;
//限制滑块最大移动位置
if(nX>=nMax){
nX = nMax;
}
//限制滑块最小移动位置
if(nX<=0){
nX = 0;
}
//修改滑块位置（因为用的是箭头函数，所以this还是指向滑块）
this.style.left = nX + 'px';
//修改滑动痕迹宽度
console.log('nx---',nX)
eBarInto.style.width = nX + this.offsetWidth/2 + 'px';
//修改文本数值
eBarText.innerHTML = Math.ceil(nX/nMax*100)/0.2;
};
//鼠标松开绑定事件，取消页面上所有事件
document.onmouseup = function(event){
document.onmousemove = null;
document.onmouseup = null;
}
});
//滑动条添加点击事件
eBarCon.addEventListener('click',function(event){
//设置滑动条位置
var nLeft = this.offsetLeft;
//获取有定位的父元素
var eParent = this.offsetParent;
//循环所有有定位的父元素
while(eParent){
//添加定位父元素offsetLeft值，用于准确定位滑动条与页面左侧的距离
nLeft += eParent.offsetLeft;
//再次获取父元素外的定位父元素
eParent = eParent.offsetParent;
}
//计算滑块位置
var nX = event.clientX - nLeft;
//修改滑块位置
eBarDrag.style.left = nX +'px';
//修改滑动痕迹宽度
eBarInto.style.width = nX + eBarDrag.offsetWidth/2 + 'px';
//修改文本数值
eBarText.innerHTML = Math.ceil(nX/nMax*100)/10
});
</script>
</html>