javascript - 在 Chrome 中将下/上填充应用于具有最小值和最大值的 "input range"

Question

我打算制作一个 slider ，逐步移动最小值 1 和最大值 5。

下面是我要找的 slider 图。

在 IE 中通过 -ms-fill-lower、-ms-fill-upper 属性处理，在 Firefox 中通过 -moz-range-progress 属性处理。但是，chromium 不支持上述属性。

首先，我弄清楚了如何按值将渐变叠加应用于 -webkit-slider-runnable-track。但我发现了一种现象，在 25% 和 75% 的域外可以看到渐变。

如何在 chrome 中应用较低的填充/较高的填充？

代码

.range{
    width:96px;
    -webkit-appearance:none;
    background-color:transparent;
}
.range:focus{
    outline:none;
}
.range::-webkit-slider-thumb{
    -webkit-appearance:none;
    display:inline-block;
    width:14px;
    height:14px;
    background-color:red;
    border-radius:50%;
    position:relative;
    bottom:6px;
    cursor:pointer;
}

.range::-webkit-slider-runnable-track {
    width:100%;
    height: 3px;
    background-color:blue;  
    border: none;
    cursor:pointer;
}

.range:focus::-webkit-slider-runnable-track{
    background-color:blue;
}

<div>
  <input type="range" step="1" min="1" max="5" class="range">
</div>

Answer 1

我们可以给 slider 一个渐变背景。然后我们需要做的就是计算需要填充多少输入。下面的示例可以处理各种范围值，而不仅仅是从 1 到 5。

我还更改了颜色以匹配您的示例。

const slider = document.querySelector(".range");

const adjustSlider = () => {
  const min = slider.min;
  const max = slider.max;
  // Calculate visible width
  const val = ((slider.value - min) * 100) / (max - min);
  
  // Change these variables to the colors you need
  const fillLeft = "#01c1c6";
  const fillRight = "#d4f5f6";
  
  slider.style.background = `linear-gradient(to right, ${fillLeft} ${val}%, ${fillRight} ${val}%`;
};

// Change background if input changes
slider.addEventListener("input", adjustSlider);

// We need to execute it at the start to set the initial value
adjustSlider();

.range{
    width:96px;
    -webkit-appearance:none;
    background-color:transparent;
}
.range:focus{
    outline:none;
}
.range::-webkit-slider-thumb{
    -webkit-appearance:none;
    display:inline-block;
    width:14px;
    height:14px;
    background-color:#01c1c6;
    border-radius:50%;
    position:relative;
    bottom:6px;
    cursor:pointer;
}

.range::-webkit-slider-runnable-track {
    width:100%;
    height: 3px;
    border: none;
    cursor:pointer;
}

<div>
  <input type="range" step="1" min="1" max="5" class="range">
</div>