javascript - 踩范围输入

Question

所以我正在努力让这个图形工作，但我在这整个事情上都是新手，所以我有一些我无法开始工作的东西。

正如您在 fiddle 上看到的，我的输入 [type=range] 取值介于 0 和 5,000,000 之间。现在，我已经设法将步数修改为 0 到 150,000 - step=10,000。在 200,000 和 1,000,000 之间 - step=100,000 然后步长为 500,000。但我的问题是很难将拇指拖到一个小值。因此，例如选择 2,000,000 很容易，但很难选择 20,000。

是否有解决方案可以使 SLIDER 的范围/段/部分从 0 到 1,000,000 更宽，从 1m 到 5m 更窄？

这些是 fiddle :https://jsfiddle.net/1x60sp0a/4/

以及我是如何完成我的步骤的:

$(function() {

  $('#flying2').on("input change", function() {

    var
      element = $('#flying2'),
      value = element.val(),
      step;

    if (value < 150000) {

      step = 10000;
    }else if (value < 250000) {

      step = 50000;

    }else if(value < 500000) {
      step = 100000;

    }else if(value < 500000) {
      step = 100000;

    }     else if(value > 1000000) {
      step = 500000;
    }



    element.attr('step', step);
  });
});

如果你能帮助我，我将不胜感激!非常感谢!

Answer 1

范围元素本身是线性的。但是，使用 JS，您可以解释它的值并缩放结果。假设我们以 0.5 的步长从 1 到 11。 1-8 取 1.000.000 * (value/8)，8 以上取 1.000.000 + (1.000.000 * (value-7))

<input type="range" min="1" max="11" step="0.5" onchange="scaleValue(this);" />
<br>
<input type="text" id="output" />

var output = document.getElementById("output");

function scaleValue(e) {
  if (e.value <= 8) {
    output.value = 1000000 * (e.value / 8);
  } else {
    output.value = 1000000 + (1000000 * (e.value - 7));
  }
}

JSFiddle here

This question对如何在 HTML5 slider 上获得非线性范围有一些想法。