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

Javascript - negative decimal input range with non-linear scale

本文关键字：十进制 输入 范围 非线性 Javascript      更新时间：2023-09-26

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

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

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

所以例如

-1000

-999.5

-998

-996

。

0

100

300

600

1000

并不完全需要如上所示，但我只是希望步骤在较低范围内更靠近，在较高范围内更远。寻找一些jQuery/JS代码来帮助我完成此操作。

谢谢！

你可以从上面的方法开始：

网页部分：

<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);
   });

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

不能直接将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));
});

斯菲德尔

相关文章：