我的頁面上有 4 個自定義輸入 [type="range"]。我使用了一些 JS 和 CSS 來添加樣式，但似乎只有第一個可以正常作業。我做錯了什么以及如何讓他們都像第一個一樣？我不希望它像一個常規范圍，我認為 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>uj5u.com熱心網友回復：
使用document.querySelector(".input-range--custom")，您只選擇第一個input與類input-range--custom。
因此，其余輸入沒有事件偵聽器。
為了選擇所有這些，您需要使用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})`;
});
})
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/442047.html
標籤：javascript html css
上一篇：表單驗證回傳問題