当input range组件min值非0时，双滑块间填充色的正确计算方法

嗨，我来帮你搞定这个双滑块填充色的问题～

你遇到的核心问题是：原来的百分比计算是基于滑块从0开始的取值范围，但当min设为非0值时，滑块的实际有效取值区间变成了max - min，而不是max，所以直接用slider.value / max算百分比就会偏离实际位置。

正确的计算思路 #

我们需要先算出滑块的有效取值范围（也就是max - min），然后把每个滑块的当前值转换成「相对于min的偏移量」，再除以有效范围得到正确的百分比。

修改后的代码实现 #

首先，在初始化的时候多获取一个sliderMinValue，并算出有效范围：

window.onload = function () {
  slideOne();
  slideTwo();
};

let sliderOne = document.getElementById("slider-1");
let sliderTwo = document.getElementById("slider-2");
let displayValOne = document.getElementById("range1");
let displayValTwo = document.getElementById("range2");
let minGap = 5;
let sliderTrack = document.querySelector(".slider-track");
let sliderMinValue = parseInt(sliderOne.min); // 获取滑块的min值
let sliderMaxValue = parseInt(sliderOne.max);
let valueRange = sliderMaxValue - sliderMinValue; // 计算有效取值范围

function slideOne() {
  if (parseInt(sliderTwo.value) - parseInt(sliderOne.value) <= minGap) {
    sliderOne.value = parseInt(sliderTwo.value) - minGap;
  }
  displayValOne.textContent = sliderOne.value;
  fillColor();
}
function slideTwo() {
  if (parseInt(sliderTwo.value) - parseInt(sliderOne.value) <= minGap) {
    sliderTwo.value = parseInt(sliderOne.value) + minGap;
  }
  displayValTwo.textContent = sliderTwo.value;
  fillColor();
}
function fillColor() {
   // 计算相对于min值的百分比
   percent1 = ((parseInt(sliderOne.value) - sliderMinValue) / valueRange) * 100;
   percent2 = ((parseInt(sliderTwo.value) - sliderMinValue) / valueRange) * 100;
   sliderTrack.style.background = `linear-gradient(to right, #dadae5 ${percent1}% , #3264fe ${percent1}% , #3264fe ${percent2}%, #dadae5 ${percent2}%)`;
}

原理说明 #

举个例子，当min=40、max=80时：

• 有效取值范围是80-40=40
• 如果滑块1的值是40，那么相对偏移量是40-40=0，百分比就是0/40*100=0%
• 如果滑块2的值是60，相对偏移量是60-40=20，百分比是20/40*100=50%
  这样线性渐变的起始和结束位置就和滑块的实际位置完全对应了，填充色自然就正确啦～

备注：内容来源于stack exchange，提问作者Jack Maessen