Question

我有一个输入范围滑块，范围从-1000到1000。

<input type="range" min="-1000" max="1000" value="0" />

我希望这些步骤是非线性的（log或exp），并且在较低范围内具有更高的精度。

因此，例如

-1000

-999.5

-998

-996

...

0

100

300

600

1000

不需要如上所示，但我只是希望步骤在较低范围内更接近，而在更高范围内则更远。寻找一些jQuery / JS代码来帮助我实现这一目标。

谢谢！

Answer 1

您可以从以上方法开始：

html部分：

＆＃13;

<input id='digits' type="range" min="-1000" max="1000" value="0" step="100" />

＆＃13;

js part：

＆＃13;

$("#digits").on("input change", function() {
       var is_negative = this.step < 0;
       this.step = (is_negative)? (Math.abs(this.step) / 1.025).toFixed(0) : Math.pow(Math.abs(this.step), 1.025).toFixed(0);
   });

＆＃13;

这不是一个正确的决定，它只是你案件的正确方向

Answer 2

您无法直接将step设置为函数。但是你可以将它输出到某个div。例如：

<input id="range" name="range" type="range" min="-1000" max="1000" value="-1000" />
<output id="rangeOutput" for="range" name="level">-1000</output>

在onInput事件step上由适当的函数计算，在我的例子中 - 二次函数：

var stepFunction = function(step, min, max){
    var range = max - min,
        coeff = Math.pow((step - min)/range, 2),
        newStep = min + coeff*range;
    return newStep;
}

$('#range').on('input', function(e){
    var target = e.target,
        step = parseInt(target.value),
        min = parseInt(target.min),
        max = parseInt(target.max);          
    $('#rangeOutput').val(stepFunction(step, min, max));
});

jsfiddle

Javascript - 具有非线性比例的负十进制输入范围

2 个答案: