Vue3+HTML+JavaScript+CSS实现渐变滑动块

最新推荐文章于 2024-09-11 20:31:47 发布

pursuitaaa

最新推荐文章于 2024-09-11 20:31:47 发布

阅读量170

点赞数 2

文章标签： css html 前端 vue javascript

本文链接：https://blog.csdn.net/2301_76497034/article/details/140333634

版权

实现一个当拖动滑块按钮时，滑动块的左边（类似于进度条）逐渐显示颜色的渐变。

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;
}

.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;
}