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

这里的问题是某些整数min + N * step的有效数字为N。

在您的情况下，有效数字（步长较大）50 + N * 250，300（您的情况下用户看不到）550, 800等等。

当您的min更改时，您需要将0更改为step - 它有点像黑客，但它会提供更多功能性的启动值＆＃34;为了你增加的步骤。

Answer 2

您可以查看此代码

html代码是这样，设置最小值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>

在特定值的HTML5 <input type =“range”/>中更改步骤

2 个答案: