范围滑块输入

Question

我很难弄清楚如何工作。

首先，我有一个范围输入滑块。滑块有 5 层增量，但问题是，在滑块的球下面有一个标签，上面写着“0/5”、“1/5”、“2/5”等。有没有办法显示标签以下：默认开始应该是“0”，然后是“0-10”、“10-25”、“25-100”、“100-500”，最后是“500+”。

<input id="range_size_value" type="text" class="rangeSliderRate"
       data-min="0.0" data-max="5.0" data-from="0"
       data-step="1"
       name="range_size_value">
                                                        
<input hidden readonly name="size" id="hidden_input_value" type="text" value="0">

$('#range_size_value').on('input', function (e) {
    let size_value = $(".irs-single");
    let input_step_value = $(this).val();
    let hidden_input_value = $('#hidden_input_value');
    
    if (input_step_value === '0') {
        size_value.attr('value', '0');
        hidden_input_value.attr('value', '0');
    }

    if (input_step_value === '1') {
        size_value.html('0-10');
        hidden_input_value.attr('value', '0-10');
    }

    if (input_step_value === '2') {
        size_value.html('10-25');
        hidden_input_value.attr('value', '10-25');
    }

    if (input_step_value === '3') {
        size_value.html('25-100');
        hidden_input_value.attr('value', '25-100');
    }

    if (input_step_value === '4') {
        size_value.html('100-500');
        hidden_input_value.attr('value', '100-500');
    }

    if (input_step_value === '5') {
        size_value.html('500+');
        hidden_input_value.attr('value', '500+');
    }
});

这是我的代码。它有点工作，但不是真的。例如，当我按住鼠标按钮并向右滑动条时，您可以看到标签变为“0-10”、“10-25”等，但只要我松开鼠标按钮，它会回到“1/5”等。

此外，还有一个名为“irs-single”的类，它是一个控制标签以显示值的跨度。我在我的 html 代码中没有看到这个 span 元素。当我检查元素时，我只会在 Google 开发工具中看到。

如果有更好的方法，请务必指出正确的方向。我觉得有比我编码的更好的方法。我觉得有很多条件“if”语句。但我想保留滑块的样式。我认为这更像是一种合乎逻辑的情况。

Answer 1

所以我将分步分解，因为这种方法可能有点多。

首先，将创建一个div 以包含范围滑块和指示器。

接下来，将制作范围滑块。

将添加一个事件侦听器来检查范围滑块的值何时发生变化。发生这种情况时，指示框的位置和 innerHTML 都会发生变化。

我将简单地使用范围滑块的value 属性，而不是像您提供的示例中那样使用dataset。这些将是整数并对应于一个数组，范围滑块的每个部分对应于数组中的一个元素。这样我们就可以得到将出现在框中的值，而无需对它们进行硬编码。

var values = ["0-10","10-25","25-100","100-500","500+"];

// event listener
document.getElementById("mySlider").addEventListener("input",function(e){
var text = values[e.target.value];
document.querySelector(".indicator").style.left = Number((e.target.value*25)-(2*e.target.value)) + "%";
// The subtraction portion ensures that the indicator doesn't go off the screen. Feel free to change the 2 to any value that works for you.
document.querySelector(".indicator").innerHTML = text;
});

* {
margin: 0;
box-sizing: border-box;
}
.container {
background-color: #ccc;
width: 100%;
display: block;
position: relative;
}
input[type=range] {
width: 100%;
display: block;
}
.indicator {
font-family: Arial;
padding: 5px;
background-color: black;
color: white;
position: absolute;
left: 0;
border-radius: 5px;
}

<div class="container">
<input type="range" min="0" value="0" max="4" step="1" id="mySlider">
<div class="indicator">
0-10
</div>
</div>