html输入范围拇指平滑运动

时间:2016-11-05 17:57:07

标签: html css forms input

我有一个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">

2 个答案:

答案 0 :(得分:2)

这些是影响平滑度的因素:

  1. 横幅的宽度
  2. 最小/最大范围
  3. 步骤的大小
  4. 所以如果你有:

    1. 1000px宽范围输入
    2. 0 - 1000范围
    3. 步长为1
    4. 每一步都只有1px,而且非常流畅。

      如果你有:

      1. 1000px宽范围输入
      2. 0 -100范围
      3. 步长为25
      4. 它将在允许值之间捕捉,显得不那么流畅。

        这实际上是您的步长与范围之间相互作用的一项功能,并为用户提供有关可接受值的有用反馈。

答案 1 :(得分:0)

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

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

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

我将输入范围 min 设置为 0,max 设置为数组中的项目数 4。然后我将 step 设置为 0.01 以获得平滑滚动。

在输入事件上,我做了以下事情:

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

基本上就是这样,当您滚动时它会很平滑,并且值会如您所愿地在范围之间变化。