关于前端: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…