JavaScript滑块加权值

Question

我有一个JavaScript滑块，它根据其位置输出0到1之间的值。我想将该值转换为在另一个范围（例如100到1000）上的值，但基于100到1000之间一组数据点的分布。

这里的用例是，当有一组非常接近的数字时，我希望滑块对变化不那么敏感。例如...假设刻度中的值为：

100, 200, 300, 500, 1000

这个滑块的前80%可能被100-500这些值所占据，因为它们分布更接近，因此更容易在它们之间进行选择。

显然有一个数学函数可以计算这个比例，可能涉及标准差和系数。有人知道是什么吗？

- Andy Hume

Answer 1

使用大尺度值之间的线性插值，类似于

var bigValues = [100, 200, 300, 500, 1000];
var input; /* will vary in the range [0.0..1.0] */
var idx; /* index of nearest entry in bigValues below input */
var frac; /* fraction [0.0..1.0) in interval in bigValues */
var output;
/* try some test values for input */
for (var i = 0; i<=20; i++) {
    input = i * 0.05;
    idx = Math.floor(input * (bigValues.length - 1));

    frac = (input - (idx) / (bigValues.length - 1)) * (bigValues.length - 1);
    if (frac == 0) { /* no need to calculate */
        output = bigValues[idx];
    }
    else {
        output = bigValues[idx] + (bigValues[idx+1] - bigValues[idx]) * frac;
    };
    document.write(input + ', ' + output + '<br />');
}

- Andrew Morton

---

谢谢，这个效果不错。最好的逆向计算方法是什么？ - Andy Hume

Answer 2

我认为使用滑块值作为自变量的任何类型的多项式方程都可以适用。具体方程取决于您的特定需求/分布。

例如，如果, 则-1 * (X^2)将给出一个偶数反转的抛物线。

- cdeszaq

Answer 3

对于任意值，我建议使用一些样条插值。将您的值集转换为一组点，其中第二个坐标在“滑块刻度”中：

    (100, 0.0), (200, 0.25), (300, 0.5), (500, 0.75), (1000, 1.0)

现在只需使用您选择的样条插值来创建平滑曲线，一旦您拥有曲线，就可以在您的100-1000刻度上获得值。

如果您不想实现任何复杂的样条插值，您可以采用线性插值，这意味着对于您滑块上的任何点，在0.0和0.25之间，您可以在100和200之间进行线性插值，在0.25和0.5之间插值在200和300之间，以此类推。

- Dominik Bucher

Answer 4

（我不知道在评论中询问与原问题相反的问题的礼仪是什么，但我会将其作为附加答案添加以适应代码。）

继续我的上一个答案，所有变量都像之前一样声明：

document.write('The other way round:<br />');

function findIntervalStart(n) {
    for (var i = 1; i < bigValues.length; i++) if (n < bigValues[i]) return i-1;
}
/* try some test values */
for (var i = 1; i <= 21; i++) {     
    output = i * 50;
    if (output >= bigValues[bigValues.length - 1]) {
        input = 1;
    }
    else if (output <= bigValues[0]) {
        input = 0;
    }
    else {
    idx = findIntervalStart(output);
        frac = (output - bigValues[idx]) / (bigValues[idx + 1] - bigValues[idx]);
        input = (idx + frac) / (bigValues.length - 1);
    };

    document.write(output + ', ' + input + '<br />');
}

- Andrew Morton