valori pesati slider javascript

Question

Ho un cursore JavaScript che emette un valore compreso tra 0 e 1 a seconda della sua posizione. Voglio convertire quel valore in un valore su un'altra scala tra 100 e 1000, ma basato sulla distribuzione di un insieme di punti di dati tra 100 e 1000.

Il caso di utilizzo qui è che voglio che il cursore sia meno sensibile ai cambiamenti quando c'è un insieme di numeri molto vicino. Ad esempio ... diciamo i valori della scala sono:

100, 200, 300, 500, 1000 

I valori 100-500 potrebbero prendere, per esempio, il primo 80% del dispositivo di scorrimento a causa della loro distribuzione più vicino, rendendo quindi più semplice la selezione fra loro.

Esiste chiaramente una funzione matematica per il calcolo di questo, che potrebbe interessare la deviazione standard ei coefficienti. Qualcuno sa di cosa si tratta?

Answer 1

mediante interpolazione lineare tra i valori su larga scala, qualcosa di simile a

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

Penso che qualsiasi tipo di equazione polinomiale, utilizzando i valori del cursore come variabile indipendente funzionerebbe. L'equazione specifica dipenderà dalle tue esigenze/distribuzione specifiche.

Per esempio, -1 * (X^2) darebbe una parabola, anche capovolta se X = 10 * [slider value]

Answer 3

Per valori arbitrari avrei propongo una sorta di interpolazione spline. Converti il ​​tuo insieme di valori per un insieme di punti, dove la seconda coordinata è nella "scala di scorrimento":

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

Ora basta usare l'interpolazione spline di vostra scelta per creare una curva liscia, e una volta che hai la curva puoi ottenere valori sulla scala 100-1000.

Se non si desidera implementare alcuna complicata interpolazione di spline, si può semplicemente prendere uno lineare, il che significa che per qualsiasi punto del cursore compreso tra 0,0 e 0,25 si interpola linearmente tra 100 e 200, tra 0,25 e 0,5 interpolate tra 200 e 300 e così via.

Answer 4

(non so che cosa l'etichetta è per chiedere l'opposto alla domanda iniziale in a comment, ma io aggiungo come una risposta aggiuntiva per adattare il codice)

Proseguendo da my previous answer, con tutte le variabili dichiarate come prima:.

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