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