更改步驟<INPUT TYPE = 「範圍」>對某些值

我試圖這樣做有一個HTML5 <input type="range">：更改步驟<INPUT TYPE = 「範圍」>對某些值

最小值：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）。

任何人都可以幫我解釋範圍的性能錯誤或誤解嗎？

來源

2016-12-30 user7358180

你想要的'step'屬性來改變基礎上，當前的「價值」？聽起來像一個糟糕的用戶體驗。 –

這裏的問題是，對於某些整數N，有效數字是min + N * step。

在你的情況下，有效的數字是（與更大的步驟）50 + N * 250，這是300（在你的情況下，用戶看不到）550, 800等等。

您將需要更改min到0當你step變化 - 這是一個黑客位，但它會提供更多的功能「初始值」爲您提高一步。

來源

2016-12-30 14:39:08

您可以檢查此代碼

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>

來源

2016-12-30 14:46:03

更改步驟<INPUT TYPE = 「範圍」>對某些值

回答

相關問題