更改HTML5中的步骤 <input type=“range”> 有一定价值

Question

我正在尝试做一个HTML5 <input type="range"> ，它具有：

• 最小值：50
• 最大值：2000
• 默认值：50
• 步骤：50

<input name="flevel_gigas" id="flying" type="range" min="50" max="2000" value="50">

当用户通过500时，输入步长将从50更改为250，直至2000。

我正在使用JQuery。 代码是：

<script>
    $(function(){
        function returnStep(value) {
            var step;
            if(value<500){
                step=50;
            }
            else{
                step=250;
            }
            return step;
        }
        $('input[name="flevel_gigas"]').on("input change",function(){
            var currentValue = $(this).val();
            $(this).attr('step', returnStep(currentValue));
        });
    });
</script>

但这行不通。 当滑块在450处时，它跳到550，然后步长更改为250，并开始正确计数，但是直到1800（因为1800加250为2050，并且超过2000）。

有人可以帮助我该范围性能的错误或误解在哪里？

Answer 1

这里的问题是，对于某个整数N ，有效数字是min + N * step 。

在您的情况下，有效数字是（更大的步骤） 50 + N * 250 ，即300 （在您的情况下用户看不到） 550, 800依此类推。

当您更改step时，您需要将min更改为0这有点麻烦，但是它将为您增加的步长提供更具功能性的“起始值”。

Answer 2

您可以检查此代码

html代码是this，将最小值设置为0

<input name="flevel_gigas" id="flying" type="range" min="0" max="2000" value="50">

和jQuery代码

 <script>
  $(function(){
    function returnStep(value) {
        var step;
        if(value<500){
            step=50;
        }
        else{
            step=250;
        }
        return step;
    }
    $('input[name="flevel_gigas"]').on("input change",function(){
        var currentValue = $(this).val();
       var step =  returnStep(currentValue);
        $(this).attr('step', step);
    });
});

</script>