HTML输入范围滑块平滑移动的指示器

Question

我有一个HTML输入范围，通过一些CSS更改其外观，并且我想知道是否有任何方法使其平滑地从当前位置变化到用户更改的位置？

input[type=range] {
        -webkit-appearance: none;
        width: 100%;
        height: 20px;
        border-radius: 5px;
        border: 1px solid;
        background: none;
        box-shadow: 0px 0px 8px 0px #555, 0px 0px 25px 0px #555 inset;
        transition: 0.4s all ease-out;
        outline: none;
    }

    input[type=range]::-webkit-slider-thumb {
        -webkit-appearance: none;
        width: 30px;
        height: 30px;
        background-color: #CCC;
        border: solid 1px #333;
        border-radius: 4px;
        box-shadow: 0px 0px 8px 0px #555, 0px 0px 25px 0px #555 inset;
        cursor: pointer;
        transition: 0.4s all ease-out;
    }

    input[type=range]:hover {
        background: rgba(255, 255, 255, 0.2);
        box-shadow: 0px 0px 13px 0px #444, 0px 0px 20px 0px #444 inset;
    }

    input[type=range]:hover::-webkit-slider-thumb {
        border: solid 1px #444;
        box-shadow: 0px 0px 15px 0px #444, 0px 0px 20px 0px #444 inset;
    }

    input[type=range]:focus {
        background: rgba(255, 255, 255, 0.4);
        box-shadow: 0px 0px 18px 0px #333, 0px 0px 15px 0px #333 inset;
    }

    input[type=range]:focus::-webkit-slider-thumb {
        border: solid 1px #333;
        box-shadow: 0px 0px 22px 0px #333, 0px 0px 15px 0px #333 inset;
    }

<input type="range" id="brightness_slider" value="90" step="1" min="30" max="100">

- Philip Eagles

Answer 1

以下是影响平滑度的因素：

1. 横幅宽度
2. 最小/最大范围
3. 步长大小

例如，如果您有以下内容：

1. 1000像素宽的范围输入
2. 0-1000范围
3. 步长为1

每个步骤将仅为1像素，非常平滑。

但是如果您有以下内容：

1. 1000像素宽的范围输入
2. 0-100范围
3. 步长为25

它将在允许的值之间切换，显示出较少的流畅性。

这实际上是您的步长和范围之间交互的一个特征，并向用户提供了有关可接受值的有用反馈。

- Fenton

---

我们该如何添加过渡效果，使得下一步操作的切换不是瞬间完成，而是平滑流畅地进行？ - Riley Fitzpatrick

Answer 2

我知道这已经很老了，但我想到的解决方案相当优雅且易于操作，因此我想与大家分享。

首先，我使用索引滚动条使其更容易。例如，我有一个值数组如下：

myArray = [0, 100, 1000, 10000, 100000]

我将输入范围的最小值设为0，最大值设为数组中项目的数量4。然后我将步长设置为.01以获得平滑滚动。

在输入事件上，我执行了以下操作：

index = Math.round(event * 1);
value = myArray[index];

这就是基本的内容，当您滚动时，它将会很平滑，并且值将在范围之间按照您所期望的方式进行更改。

- emalamisura