Javascript slider values

Question

I have a JavaScript slider that outputs a value from 0 to 1 depending on its position. I want to convert this value to a value on a different scale between 100 and 1000, but based on the distribution of the set of data points between 100 and 1000.

In this case, I want the slider to be less sensitive to changes when there is a very close set of numbers. For example ... let's say the values ​​in the scale:

100, 200, 300, 500, 1000

Values ​​of 100-500 may occupy, say, the first 80% of the slider due to their closer distribution, therefore, to simplify the choice between them.

Obviously, there is a mathematical function to calculate this, possibly involving standard deviation and coefficients. Does anyone know what it is?

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

, , , . /.

, -1 * (X^2) , X = 10 * [slider value]

Answer 3

- -. , " ":

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

- , , , 100-1000.

If you do not want to implement complex spline interpolation, you can just take linear, that is, for any point on your slider between 0.0 and 0.25, you linearly interpolate between 100 and 200, between 0.25 and 0.5 interpolate between 200 and 300 and t .d.

Answer 4

(I don’t know why the label asks the opposite source question in the comment , but I will add it as an additional answer to enter the code in.)

Continuing with my previous answer with all the variables declared earlier:

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