如何使用 CSS 定位单个范围滑块

Question

我有几个范围滑块，并且希望每个滑块上的“可运行轨道”具有不同的颜色。我为每个滑块指定了一个单独的 CLASS（在本例中是 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 来控制您需要的值并且您不必重复滑块的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">