手动实现双向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...