Question

我有几个范围滑条，并且每个滑条都希望有不同的颜色。我给每个滑条都指定了一个单独的CLASS（在这种情况下，它是sepiaSlider，但是无法在线找到参考以此为目标的语法。

我能想到的只是..

ExarbeteStudentFormSet = forms.formset_factory(ExarbeteStudent,
                                            extra=1,
                                            max_num=60,
                                            can_delete=True,

...那是行不通的。

我可以通过使用div封装“ 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>

相反？

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">

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

1 个答案: