如何编辑一个HTML滑块,使它像这样?

5sxhfpxr  于 2022-12-09  发布在  其他
关注(0)|答案(1)|浏览(147)

我想让滑块从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/

yduiuuwa

yduiuuwa1#

可以根据当前值有条件地调整step属性。
第一个

相关问题