我想让滑块从1-999步进1,然后从1 k到5 m步进1 k,看起来像这样
我有一个代码设置,从1 k到5 m,我想添加从1到999在一个很好的方式开始的滑块,但我不能使它。
<div class="form-group">
<div class="wrapper">
<h5 class="font-alt mt-30">Number of Followers</h5>
<div class="price-input">
<div class="field">
<input readonly
class="input-min" value="0"
name="followers-min">
</div>
<div class="separator">-</div>
<div class="field">
<input readonly
class="input-max" value="INFINITY"
name="followers-max">
</div>
</div>
<div class="slider">
<div class="progress"></div>
</div>
<div class="range-input">
<input style="cursor: pointer;" type="range" class="range-min" min="0"
max="5000000"
value="0"
step="1000">
<input style="cursor: pointer;" type="range" class="range-max" min="0"
max="5000000"
value="5000000"
step="1000">
</div>
</div>
</div>
我目前的Javascript
const rangeInput = document.querySelectorAll(".range-input input"),
priceInput = document.querySelectorAll(".price-input input"),
range = document.querySelectorAll(".slider .progress");
let priceGap = 100_000;
rangeInput.forEach(input => {
input.addEventListener("input", e => {
let minVal = parseInt(rangeInput[0].value),
maxVal = parseInt(rangeInput[1].value);
if ((maxVal - minVal) < priceGap) {
if (e.target.className === "range-min") {
rangeInput[0].value = maxVal - priceGap
} else {
rangeInput[1].value = minVal + priceGap;
}
} else {
let temp = 0
let addition = ""
if (minVal < 1_000) {
temp = String(minVal)
} else if (minVal >= 1_000 && minVal < 10_000) {
temp = String(minVal)[0]
addition = "K"
} else if (minVal >= 10_000 && minVal < 100_000) {
temp = String(minVal)[0] + String(minVal)[1]
addition = "K"
} else if (minVal >= 100_000 && minVal < 1_000_000) {
temp = String(minVal)[0] + String(minVal)[1] + String(minVal)[2]
addition = "K"
} else if (minVal >= 1_000_000) {
temp = String(minVal)[0]
addition = "M"
}
let tempMax = 0
let additionMax = ""
if (maxVal >= 1_000 && maxVal < 10_000) {
tempMax = String(maxVal)[0]
additionMax = "K"
} else if (maxVal >= 10_000 && maxVal < 100_000) {
tempMax = String(maxVal)[0] + String(maxVal)[1]
additionMax = "K"
} else if (maxVal >= 100_000 && maxVal < 1_000_000) {
tempMax = String(maxVal)[0] + String(maxVal)[1] + String(maxVal)[2]
additionMax = "K"
} else if (maxVal >= 1_000_000) {
tempMax = String(maxVal)[0]
additionMax = "M"
}
if (maxVal === 5000000) {
priceInput[1].value = "INFINITY";
} else {
priceInput[1].value = Number(tempMax) + additionMax;
}
priceInput[0].value = Number(temp) + addition;
range[0].style.left = ((minVal / rangeInput[0].max) * 100) + "%";
range[0].style.right = 100 - (maxVal / rangeInput[1].max) * 100 + "%";
}
}
)
;
});
有什么想法如何添加从1-999在第一个滑块,使它看起来有点像该网站上的滑块?https://inflact.com/tools/instagram-search/
1条答案
按热度按时间yduiuuwa1#
可以根据当前值有条件地调整
step
属性。第一个