如何在chrome中填写输入类型=范围？答案

【问题标题】：How to fill the input type = range in chrome?如何在chrome中填写输入类型=范围？
【发布时间】：2021-01-25 09:12:47
【问题描述】：

我必须在我的网络应用程序中使用输入类型 = 范围。问题是它似乎没有正确填充。

看看：

这是我的代码：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.8.2/angular-csp.min.css" integrity="sha512-nptw3cPhphu13Dy21CXMS1ceuSy2yxpKswAfZ7bAAE2Lvh8rHXhQFOjU+sSnw4B+mEoQmKFLKOj8lmXKVk3gow==" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.8.2/angular.min.js" integrity="sha512-7oYXeK0OxTFxndh0erL8FsjGvrl2VMDor6fVqzlLGfwOQQqTbYsGPv4ZZ15QHfSk80doyaM0ZJdvkyDcVO7KFA==" crossorigin="anonymous"></script>
<input type="range" min="0" max="3" value="0" @change='${this.handleTableColumns}'>

（调用@change的函数隐藏索引等于e.target.value的表列）。

您有解决此问题的想法吗？提前致谢！

【问题讨论】：

您的范围从 0 到 3。因此您可以选择 [0, 1, 2, 3]。您的滑块似乎在 1 和 2 之间下降了一半，蓝线似乎选择了 1 作为值。您希望能够选择1.5 吗？（此外，我无法在 Windows 10 上的 Chrome 87 上手动重现此问题。）
不，我不希望能够选择 1.5，我希望能够选择 0,1,2,3。我也尝试添加 step='1'，但没有任何改变
您的代码 sn-p 完全按照我的预期工作
是的，我不知道为什么它在这里有效，而在本地却无效

标签： javascript html css lit-element input-type-range

【解决方案1】：

好的，伙计们，我发现了错误：有一个 css 以一种不寻常的方式设置输入样式。我以这种方式只更改了特定输入标签的样式，而不是范围输入标签。

这是破坏范围输入的 css 规则。这也解释了为什么这里贴出的代码是有效的。谢谢大家！祝你有美好的一天

.styled-input {
          padding: 4px 20px;
          margin: 0 4px;          
          font-size: 14px;
          border-radius: 2px;
          border: 1px solid;
          outline: none;
        }

【讨论】：