我设置了一个 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">
这些是影响平滑度的因素：
- 横幅的宽度
- 最小/最大范围
- 步数的大小
所以如果你有：
- 1000px宽范围输入
- 0 - 1000 范围
- 步长为 1
每一步只有1px，而且会很平滑。
如果你有：
- 1000px宽范围输入
- 0 -100 范围
- 步长为 25
它将在允许值之间突然变化，显得流动性较差。
这实际上是步长和范围之间相互作用的一个特征，并为用户提供了关于可接受的值的有用反馈。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
