javascript - Control deslizante logarítmico
slider logarithm (4)
Tengo un control deslizante con valores que van de 0 a 100.
Quiero asignarlos a un rango de 100 a 10,000,000.
He visto algunas funciones dispersas por la red, pero todas están en C ++. Lo necesito en Javascript
¿Algunas ideas?
Estaba buscando control deslizante Logarítmico para angular pero no puedo encontrar ninguno y luego me encontré con esta respuesta,
Y lo he creado para Angular 2+ (Demo está en Angular 6): DEMO DE TRABAJO
Gracias a @sth , por snippet:
function LogSlider(options) {
options = options || {};
this.minpos = options.minpos || 0;
this.maxpos = options.maxpos || 100;
this.minlval = Math.log(options.minval || 1);
this.maxlval = Math.log(options.maxval || 100000);
this.scale = (this.maxlval - this.minlval) / (this.maxpos - this.minpos);
}
LogSlider.prototype = {
// Calculate value from a slider position
value: function(position) {
return Math.exp((position - this.minpos) * this.scale + this.minlval);
},
// Calculate slider position from a value
position: function(value) {
return this.minpos + (Math.log(value) - this.minlval) / this.scale;
}
};
No del todo respondiendo la pregunta, pero para las personas interesadas, el reverso de la última línea es
return (Math.log(value)-minv)/scale + min;
solo para documentar.
TENGA EN CUENTA que el valor debe ser> 0.
Para obtener la distribución que desea, creo que puede usar esta fórmula:
var value = Math.floor(-900 + 1000*Math.exp(i/10.857255959));
Aquí hay una página independiente que imprimirá los valores que obtendrá para su control deslizante 0-100, después de pasarlos a través de esa fórmula:
<html><body><script>
for (var i = 0; i <= 100; i++) {
var value = Math.floor(-900 + 1000*Math.exp(i/10.857255959));
document.write(value + "<br>");
}
</script></body></html>
Los números van de 100 a 10,000,000 en lo que a mi ojo matemáticamente oxidado parece ser la distribución que deseas. 8-)
Puedes usar una función como esta:
function logslider(position) {
// position will be between 0 and 100
var minp = 0;
var maxp = 100;
// The result should be between 100 an 10000000
var minv = Math.log(100);
var maxv = Math.log(10000000);
// calculate adjustment factor
var scale = (maxv-minv) / (maxp-minp);
return Math.exp(minv + scale*(position-minp));
}
Los valores resultantes coinciden con una escala logarítmica:
js> logslider(0);
100.00000000000004
js> logslider(10);
316.22776601683825
js> logslider(20);
1000.0000000000007
js> logslider(40);
10000.00000000001
js> logslider(60);
100000.0000000002
js> logslider(100);
10000000.000000006
La función inversa sería, con las mismas definiciones para minp , maxp , minv , maxv y scale , calcular una posición del control deslizante a partir de un valor como este:
function logposition(value) {
// set minv, ... like above
// ...
return (Math.log(value)-minv) / scale + minp;
}
En conjunto, envuelto en una clase y como un fragmento de código funcional, se vería así:
// Generic class:
function LogSlider(options) {
options = options || {};
this.minpos = options.minpos || 0;
this.maxpos = options.maxpos || 100;
this.minlval = Math.log(options.minval || 1);
this.maxlval = Math.log(options.maxval || 100000);
this.scale = (this.maxlval - this.minlval) / (this.maxpos - this.minpos);
}
LogSlider.prototype = {
// Calculate value from a slider position
value: function(position) {
return Math.exp((position - this.minpos) * this.scale + this.minlval);
},
// Calculate slider position from a value
position: function(value) {
return this.minpos + (Math.log(value) - this.minlval) / this.scale;
}
};
// Usage:
var logsl = new LogSlider({maxpos: 20, minval: 100, maxval: 10000000});
$(''#slider'').on(''change'', function() {
var val = logsl.value(+$(this).val());
$(''#value'').val(val.toFixed(0));
});
$(''#value'').on(''keyup'', function() {
var pos = logsl.position(+$(this).val());
$(''#slider'').val(pos);
});
$(''#value'').val("1000").trigger("keyup");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Input value or use slider:
<input id="value" />
<input id="slider" type="range" min="0" max="20" />