Question

所以我试图让这件事做得很好，但我在这件事上有点新意，所以我有一些我无法开始工作的东西。

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

它有一个解决方案，因此SLIDER的范围/片段/部分从0到1,000,000更宽，从1米到5米更宽？

这些是小提琴：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 *（值/ 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滑块上获取非线性范围有一些想法。

踩上范围输入

1 个答案: