javascript - 根据值更改范围元素的步骤

Question

现在我有这个范围元素:

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

我希望它的“步骤”根据它的值而改变。例如，如果值小于 200000，则 step = 5000，如果大于 200000，则 step = 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"/>