html输入范围拇指平滑移动 [英] html input range thumb smooth movement

问题描述

我设置了HTML输入范围，外观上进行了一系列CSS更改，我想知道是否有任何方法可以使它从任何地方平滑地更改到用户更改的地方?

I have an HTML input range set up with a bunch of CSS changes to the appearance, and I was wondering if there was any way to make it smoothly change from wherever it is to where the user changes?

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">

推荐答案

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

These are the things that affect the smoothness:

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

所以，如果您有:

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

每个步骤只有1像素，而且非常平滑.

Each step will be just 1px, and it will be quite smooth.

如果有:

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

它将在允许的值之间切换，从而显示较少的波动.

It will snap between the allowable values, appearing less fluid.

这实际上是步长和范围之间相互作用的功能，并向用户提供关于可接受的值的有用反馈.

This is really a feature of the interaction between your step size and your range, and provides useful feedback to the user on what values are acceptable.

这篇关于html输入范围拇指平滑移动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！