html输入范围拇指平滑移动答案

【问题标题】：html input range thumb smooth movementhtml输入范围拇指平滑移动
【发布时间】：2016-11-05 17:57:07
【问题描述】：

我设置了一个 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;
    }

&lt;input type="range" id="brightness_slider" value="90" step="1" min="30" max="100"&gt;

【问题讨论】：

标签： html css forms input

【解决方案1】：

这些是影响流畅度的因素：

横幅的宽度
最小/最大范围
步长

如果你有：

1000px 宽范围输入
0 - 1000 范围
步长为 1

每一步只有1px，非常流畅。

如果你有：

1000px 宽范围输入
0 -100 范围
步长为 25

它会在允许值之间捕捉，看起来不太流畅。

这确实是您的步长和您的范围之间相互作用的一个特征，并就哪些值是可以接受的向用户提供有用的反馈。

【讨论】：

我们如何添加一个过渡，以便当它移动到下一步时，它会平滑而不是瞬间完成。

【解决方案2】：

我意识到此时这已经很老了，但我发现我想出的解决方案非常优雅且易于执行，所以我想我会分享它。

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

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

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

在输入事件上我做了以下操作：

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

基本上就是这样，当你滚动它时它会很平滑，并且值会在你所期望的范围之间变化。

【讨论】：