需求

产品给出的视觉图有个滑杆，样式比较独特，如果用组件库来改的话可能也很麻烦，不如直接用HTML+CSS自己再实现一个。

这个视觉长这个样子：

这玩意独特就独特在拖动的那个小球改成了一个指向下的小飞机，还有一些颜色的修改，下面记录一下实现方法。

实现

选择HTML元素

这里开始比较简单，用input标签，然后type用range就可以得到一个原生滑杆了，然后给出一些参数，如最大值max，步长step，默认值value，最小值min。

然后再用input事件把数据对上，这样滑杆的功能就基本完成了，再开始修改样式。

取消默认样式

取消默认样式比较简单，直接使用appearance:none 就好了

设置滑块的样式

滑块的样式需要使用伪类，也是先取消默认样式，然后根据需要来调整就好了

input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance: none;
  width: 10px;
  height: 10px;
  background-color: #f30f3f;
  border-radius: 50%;
}

设置滑块前后不同颜色的背景

css这里直接使用background把颜色设置好，然后通过行内样式来计算不同颜色占整个背景的颜色

input[type="range"]{
  -webkit-appearance: none;
  background: -webkit-linear-gradient(#0000ff,#0000ff) #f8f8f8 no-repeat;
  border-radius: 5px
}

这里使用vue来做演示

  <input 
    type="range" 
    class="slider"
    max="100"
    min="0"
    step="1"
    :value="stepValue"
    @input="onChange"
    :style="{backgroundSize: stepValue + '% 100%','--step': stepValue}"  // 这里用来计算不同颜色所占的比例
    />

到这里实现的效果是这个样子的

一点小问题

在拖动滑块的时候会发现背景颜色和滑块的中心点没有对齐，这里需要用transform来做一个小校正，业务需求是一个倒着的纸飞机，尖尖那里指向进度条的位置，现在行内样式添加'--step': -10+10/(40/2)*stepNumber+'px'，然后到css样式里面在transform: translateY(-20px) translateX(var(--step)) 就完事了

具体修改

在滑块那里把滑块的背景设置为纸飞机的背景图片，然后向上偏移在滑杆的背景那里修改背景颜色就可以实现效果了。

自定义滑动杆样式

需求

实现