Question

我在标记中创建了一个范围输入，并将其值设置为0，如下所示：

<input type="range" min="0" max="100" step="10" value="0">

我想根据其当前值设置样式。假设如果它的值为“10”，我想给它一个50px的保证金。我写了以下简单的CSS规则：

[type="range"][value="10"] {
    margin-top: 50px;
}

当将范围输入滑动到10时，人们希望规则触发，但事实并非如此。但是在标记中将输入值设置为“10”时会触发。

我在这里遗漏了什么吗？是否真的没有办法根据用户动态改变的值来设置范围输入的样式，仅使用CSS？

Answer 1

input和value属性的值是两个不同的东西。 value属性表示HTML中指定的元素的初始值。 CSS只能定位该属性，遗憾的是无法定位元素的实际值。但是，您可以使用javascript在更改时读取当前值，然后使用输入值更新value属性，然后您可以在CSS中定位更新的属性。

std::string

document.getElementById('input').addEventListener('change',function() {
  this.setAttribute('value',this.value);
});

input[type="range"][value="10"] {
  margin-top: 10px;
}
input[type="range"][value="20"] {
  margin-top: 20px;
}

Answer 2

我以更反应的方式做到了这一点：

const [sliderValue,setSliderValue]=useState(0);

    <input className="slider" step="1" min="0" max="100" value={sliderValue} type="range" 
           onChange={(e:any) => 
               {
                   let value = e.target.value
                   setSliderValue(value)
               } 
            } />

HTML范围输入不会更新其值

2 个答案: