js使用input实现双向slider

手动实现双向slider

通过使用两个input实现双向slider

---

1. HTML大致结构如下

<input type="range" min="0">
<input type="range" min="0">

2. 样式改造

使用两个range类型的input，然后修改样式。

1. 隐藏自身滑动颜色
2. 使得叠加展示range都能拖动
3. 兼容
4. 调整拖动圆圈样式

input[type="range"]{
  -webkit-appearance: none;
  appearance: none;     //  隐藏滑动样式
}
//  叠加拖动
[type="range"] {
   pointer-events: none;
 }
 [type="range"]::-webkit-slider-thumb {
    pointer-events: auto;
 }
 [type="range"]::-moz-range-thumb {
   pointer-events: auto;
 }
// 调整拖动圆圈样式
input[type='range']::-webkit-slider-thumb {

3. 增加打底色

在input下方添加一个div，作为滚动的底色，通过计算range区间所占的百分比来调整底色的区间

中心计算思想为：
const from = Math.ceil( '区间最小值' / 'input最大值' * 100);
const to = Math.ceil( '区间最大值'/ 'input最大值' * 100);
'底色div'[0].style.background =
        `linear-gradient(to right, #898dad ${from}%, #5f0085 ${from}%, #5f0085 ${to}%,#898dad ${to}%, #898dad) 100%`;
//  计算区间中的最大最小值所占的百分比，通过百分比设置样式的渐变

4. 最终效果

https://codepen.io/kekelezizi...