根据其值更改范围元素的步长

Question

现在我有这个范围元素：

<input  type="range" 
        onchange= "calculate();"
        id="sumRange" 
        min="50000" 
        max="500000" 
        value="50000" 
        step= "50000"/>

我希望它的"步骤"根据其值而变化。例如，如果该值小于 200000，则步长 = 5000，如果大于 200000 则步长 = 50000。

我该怎么做？我是否使用简单的"if"语句创建一个函数并使其在范围更改时运行？

我看到的所有示例都涉及jQuery或其他东西，我可以在没有...那？

Answer 1

见下文，根据需要更改范围

function calculate() {
  var input = document.getElementById('sumRange');
  var val = input.value;
  
  var newStep;
  if (val < 100000) {
    newStep = 10;
  } else if (val < 150000) {
    newStep = 20;
  } else if (val < 200000) {
    newStep = 30;
  } else if (val < 250000) {
    newStep = 40;
  } else {
    newStep = 50;
  }
  
  input.step = newStep;
}

<input  type="range" 
        onchange= "calculate();"
        id="sumRange" 
        min="50000" 
        max="500000" 
        value="50000" 
        step= "50000"/>

Answer 2

以下是

您可以使用jQuery在计算函数中执行的操作

  calculate = function() {
  if ($('#sumRange').attr('value') < 200000 ) {
     $('#sumRange').attr('step',5000);
  } else {
     $('#sumRange').attr('step',50000);
  }

Answer 3

var sumRange = document.getElementById(“sumRange”);
sumRange.oninput = function(){
  var value = this.value;
  if (value > 20000) {
     this.step = 50000;
 } else {
     this.step=5000;
  }