更改步骤<INPUT TYPE = “范围”>对某些值

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等等。

您将需要更改min到0当你step变化 - 这是一个黑客位，但它会提供更多的功能“初始值”为您提高一步。

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>