当按钮移动时,我有范围但没有颜色,我想实现当按钮移动时,颜色条被填充。有任何想法吗?
在这张图片中你可以看到我想要做什么
.range{
height: 20px;
width: 100%;
background-color: #f1f1f1;
border-radius: 50px;
-webkit-appearance: none;
}
.range::-moz-range-thumb {
width: 25px;
height: 25px;
background-color: #ff0000;
border-radius: 50%;
border: 0;
}
<input id="range" class="range" type="range">
In the example styles, the color is indicated, which it takes when the range of the selector is moved.
重要的是,如果
-moz-range-progress
Chrome 不支持它,这就是不同浏览器示例的原因。在 Chrome 的情况下
在火狐的情况下
来源:StackOverflow 英文
要为 a 添加样式,
<input type="range">
您可以通过以下方式进行操作:如果您只想在光标移动时为滚动条赋予不同的颜色,您可以通过在 js 变量 (
input
) 中获取滑块的值,然后将其传递给 css 变量 (--value
) 并将其应用于带有渐变背景的栏(覆盖之前的默认样式)。如果您想要一个更风格化的条形图,其标签类似于图像中的那个,除上述之外,您还必须添加一个代码以将范围的值分配给标签和样式,以使光标呈圆形:
这样它看起来与图像中的非常相似。
这两种解决方案在 Firefox、Chrome 和其他浏览器中都可以正常工作并且看起来不错。
如果您想了解有关如何为这些元素赋予样式的更多信息,您可以查阅以下我学习的链接,它们是 100% 的西班牙语:
样式滑块,另一个用例
样式滑块,输入类型范围
我希望它有所帮助。问候。