javascript滑块加权值

Question

我有一个JavaScript滑块，根据其位置输出0到1之间的值。 我想将该值转换为介于100和1000之间的另一个比例的值，但是基于100到1000之间的一组数据点的分布。

这里的用例是，当有一组非常接近的数字时，我希望滑块对变化不太敏感。 例如...让我们说比例尺中的值是：

100, 200, 300, 500, 1000

值100-500可能会占据滑块的前80％，因为它们分布较近，因此可以更容易地在它们之间进行选择。

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

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

Answer 2

我认为任何一种多项式方程，使用滑块值作为自变量都可以。 具体的等式取决于您的具体需求/分布。

例如，如果X = 10 * [slider value] ，- -1 * (X^2)会给出一个偶数反抛物线

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之间插值等等。

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