html - 如何使用 CSS 定位单个范围 slider

Question

我有几个范围 slider ，并且希望每个 slider 上的“可运行轨道”有不同的颜色。我给每个 slider 一个单独的类(在这种情况下它是 sepiaSlider，但无法在线找到引用到目标语法。

我能想到的就是..

<input class="sliders sepiaSlider sepiaSliderID7643108" type="range" name="amountRange" min="0" max="100" value="0" step="1" oninput="this.form.amountInput.value=this.value">


<style>
.sepiaSlider input[type=range]::-webkit-slider-runnable-track {
    //styles
 }
</style>

...那是行不通的。

我可以通过使用类为“sepiaSlider”的 div 包装输入来定位它，然后执行类似...

.sepiaSlider > input{} 

代替？

Answer 1

一个想法是使用CSS variable控制您需要的值，您不必重复 slider 的 CSS。

这是我更改背景颜色的示例:

::-webkit-slider-runnable-track {
  width: 100%;
  height: 8.4px;
  cursor: pointer;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  background: var(--c,yellow);
  border-radius: 1.3px;
  border: 0.2px solid #010101;
}
.type1 {
  --c:red;
}
.type2 {
  --c:blue;
}

<input type="range" class="type1">
<input type="range" class="type2">
<input type="range">