Javascript

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 部分：

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

js 部分：

$("#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);
   });

这不是一个正确的决定，它只是适合您的情况的正确方向

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 - 带非线性刻度的负十进制输入范围

Javascript - negative decimal input range with non-linear scale

logarithm

slider

exponential