实现一个当拖动滑块按钮时,滑动块的左边(类似于进度条)逐渐显示颜色的渐变。
- HTML
<input
type="range"
:min="0."
:max="1."
:step="0.001"
class="gradient-slider"
@input="change"
id="myRange_2"
>
- JavaScript
const change = () => {
const slider = document.getElementById('myRange_2');
const value = (slider.value - slider.min) / (slider.max - slider.min) * 100;
const gradientLeft = `linear-gradient(to right, #3859ae 0%, #3b93dd ${value}%, #ddd ${value}%, #ddd 100%)`;
slider.style.background = gradientLeft;
}
- CSS
.gradient-slider {
-webkit-appearance: none;
width: 231px;
height: 15px;
background: #ddd;//滑动槽背景色
outline: none;
border-radius: 10px;
cursor: pointer;
}
.gradient-slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 25px;
height: 25px;//滑块按钮大小
background: white;
border-radius: 50%;
cursor: pointer;
}
- 实现效果
- 第一次写博客,有什么不对的欢迎指正,或者有更好的实现方法也可以在评论区留言或者私信我!