总体思路：用一个div将p标签和input滑条包起来 ，用p的宽度表示滑条的进度，div表示整个滑条的颜色和长度，把input滑条背景颜色透明。将input滑条滑动的动态值赋值给p标签的宽度就达到了滑条滑动变色的效果。具体解析如下：
1.html结构解析
<body>
<div class="slider-panel">
<!--slider-box表示整个滑条的颜色 -->
<div class="slider-box">
<!--slider-value表示滑条划过后的部分用一个颜色显示覆盖slider-box的颜色达到进度作用 -->
<p class="slider-value"></p>
<!-- 滑条的背景颜色透明只有-->
<input type="range" min="0" step="1" max="100" value="0">
</div>
<p><span class='slider-percentage'>0</span>%</p>
</div>
</div>
</body>
2.css结构解析
<style>
* {
padding: 0;
margin: 0;
}
.slider-panel {
background-color: #fcc688;
height: 300px;
width: 400px;
padding: 20px;
}
.slider-panel .slider-box {
background-color: red;
margin-top: 40px;
display: inline-block;
width: 305px;
height: 6px;
position: relative;
}
/* 滑条划过的宽度，默认值为0 */
.slider-panel .slider-box .slider-value {
background-color: blue;
height: 6px;
width: 0;
}
/* 滑条的样式。默认透明 */
.slider-panel input {
position: absolute;
left: 0;
top: 0;
-webkit-appearance: none;
-ms-appearance: none;
background: transparent;
width: 305px;
height: 2px;
outline: none;
}
/* 圆形滑块的样式 */
.slider-panel input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
height: 24px;
width: 24px;
background-color: #333333;
border-radius: 50%;
}
</style>
3.js结构解析
<script>
//绑定鼠标滑动事件
$(' .slider-panel input').on('mousemove touchmove touchend click', moveSlider)
function moveSlider() {
// 获取当前滑条的动态值
let sliderValue = parseInt($(this).val());
// 将滑条的值赋值给滑条划过后p标签的宽度
$('.slider-value').css('width', sliderValue + '%');
// 显示当前滑条的动态值
$('.slider-percentage').text(sliderValue);
}
</script>
有问题的朋友可以留言，喜欢的朋友请点赞和关注，具体html代码见github：https://github.com/Aniugel/slider/blob/master/slider.html
网友评论