如何在chrome中填充输入类型=范围？

问题描述

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

看看：

这是我的代码：

<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 的表列）。

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

解决方法

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

这是破坏范围输入的css规则。这也解释了为什么这里发布的代码可以正常工作。谢谢大家！祝你有个美好的一天

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