原生js+css调节音量滑块

本文实例为大家分享了js调节音量滑块的具体代码，供大家参考，具体内容如下

效果

html部分

当前位置0%

css部分

.all {
width: 500px;
height: 80px;
margin: 100px auto;
position: relative;
}

.bar {
width: 500px;
height: 20px;
border-radius: 10px;
background: #aaa;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
cursor: pointer;
}

.box {
width: 30px;
height: 30px;
background: #000;
position: absolute;
bottom: 0;
top: 0;
margin: auto 0;
border-radius: 50%;
cursor: pointer;
transition: left 0.1s linear 0s;
}

js逻辑

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。