如何将自定义 styles 添加到输入类型 =“范围”

Question

我的页面上有 4 个自定义 input[type="range"]。 我用了一些JS和CSS来添加styles，但似乎只有第一个可以正常工作。 我做错了什么以及如何让他们都像第一个一样？ 我不希望它像一个常规范围，我认为 JS + CSS 技巧将是最好的选择。 不过，如果您知道如何让它发挥作用，我会很乐意尝试一下。

这是 codepen 的链接： https://codepen.io/tomavl/pen/bGabZvj

 var fillColor = "#9D3C3C", emptyColor = "#DDDDDD"; document.querySelector(".input-range--custom").addEventListener("input", function () { var percent = (100 * (this.value - this.min)) / (this.max - this.min) + "%"; // this.setAttribute('value', this.value); // this.setAttribute('title', this.value); this.style.backgroundImage = `linear-gradient( to right, ${fillColor}, ${fillColor} ${percent}, ${emptyColor} ${percent})`; });

 input[type="range"].input-range--custom { -webkit-appearance: none; width: 100%; margin: 4px 0; background-image: linear-gradient( to right, rgb(157, 60, 60), rgb(157, 60, 60) 48%, rgb(221, 221, 221) 48% ); border-radius: 20px 20px 0px 0px; } input[type="range"].input-range--custom:focus { outline: none; } input[type="range"].input-range--custom::-webkit-slider-runnable-track { width: 100%; height: 4px; cursor: pointer; } input[type="range"].input-range--custom:after { width: 20%; height: 4px; background-color: #9d3c3c; } input[type="range"].input-range--custom::-webkit-slider-thumb { height: 16px; width: 16px; border-radius: 15px; background: #ffffff; cursor: pointer; -webkit-appearance: none; margin-top: -5.5px; background: #9d3c3c; border: 2px solid #ffffff; box-sizing: border-box; box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.15); }

 <div class="range"> <h5>Distance</h5> <div class="_flex-col range__container" style="width: 280px"> <label for="distance"></label> <input id="distance" type="range" class="input-range--custom" min="0" max="50"> </div> </div> <div class="range"> <h5>Square</h5> <div class="_flex-col range__container" style="width: 280px"> <label for="square"></label> <input id="square" type="range" class="input-range--custom" min="0" max="50"> </div> </div> <div class="range"> <h5>Min height</h5> <div class="_flex-col range__container" style="width: 280px"> <label for="minheight"></label> <input id="minheight" type="range" class="input-range--custom" min="0" max="50"> </div> </div> <div class="range"> <h5>Max height</h5> <div class="_flex-col range__container" style="width: 280px"> <label for="maxheight"></label> <input id="maxheight" type="range" class="input-range--custom" min="0" max="50"> </div> </div>

Answer 1

使用document.querySelector(".input-range--custom") ，您仅选择带有 class input-range--custom的第一个input 。

因此，输入的 rest 没有事件侦听器。

为了 select 所有这些，您需要使用querySelectorAll而不是querySelector 。

用以下内容替换您的 JS 代码：

var fillColor = "#9D3C3C",
  emptyColor = "#DDDDDD";

const rangeInputs = document.querySelectorAll(".input-range--custom")

rangeInputs.forEach(input => {
    input.addEventListener("input", function () {
      var percent = (100 * (this.value - this.min)) / (this.max - this.min) + "%";
      //  this.setAttribute('value', this.value);
      //  this.setAttribute('title', this.value);
      this.style.backgroundImage = `linear-gradient( to right, ${fillColor}, 
      ${fillColor} ${percent}, ${emptyColor} ${percent})`;
  });
})