Curseur logarithmique

Question

J'ai un curseur dont les valeurs vont de 0 à 100.

Je veux les mettre en correspondance avec un intervalle de 100 à 10 000 000.

J'ai vu quelques fonctions dispersées sur le net mais elles sont toutes en C++. J'en ai besoin en Javascript.

Des idées ?

Answer 1

Vous pouvez utiliser une fonction comme celle-ci :

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

Les valeurs résultantes correspondent à une échelle logarithmique :

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 fonction inverse serait, avec les mêmes définitions de minp , maxp , minv , maxv et scale calculer la position du curseur à partir d'une valeur comme celle-ci :

function logposition(value) {
   // set minv, ... like above
   // ...
   return (Math.log(value)-minv) / scale + minp;
}

Le tout, enveloppé dans une classe et sous forme d'extrait de code fonctionnel, ressemblerait à ceci :

// 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" />

Answer 2

Cela ne répond pas tout à fait à la question, mais pour les personnes intéressées, la carte inverse de la dernière ligne est la suivante

return (Math.log(value)-minv)/scale + min;

juste pour documenter.

NOTE : la valeur doit être > 0.

Answer 3

Le problème avec un véritable curseur logarithmique est qu'à l'extrémité inférieure, des points multiples sur le curseur entraîneront probablement des valeurs doubles.

Du point de vue de l'interface utilisateur, il ne fournit pas non plus une sortie très intuitive pour l'entrée des utilisateurs.

Je pense qu'une meilleure option est d'utiliser une transformation "étagée" à distribution égale.

En d'autres termes, nous spécifions une série d'incréments que nous voulons utiliser (ex : 1, 10, 100, 1000). Ensuite, nous divisons le curseur en parties égales sur la base du nombre d'incréments que nous avons défini. Lorsque nous glissons à travers nos différentes sections, la sortie du curseur sera incrémentée par l'incrément respectif.

DÉMO DE TRAVAIL

CODE DE RÉACTION

Dans l'exemple ci-dessus, nous définissons notre min , max & intervals le tableau.

<ExpoStepSlider
  intervals={[1, 2, 5, 10, 100, 1000]}
  min={1}
  max={50000}
/>

Nous devons ensuite trouver le nombre de valeurs discrètes que doit avoir notre curseur pour qu'il aille correctement de min à max sur la base de nos distributions d'intervalles définies.

let sliderPoints = Math.ceil(
  (max - min) / 
  intervals.reduce((total, interval) => total + interval / intervals.length, 0)
);

Dans ce cas 535 .

Note : Les points de votre curseur ne doivent pas dépasser le nombre de pixels du curseur.

Enfin, nous transformons simplement notre sortie en utilisant l'algorithme décrit ci-dessus. L'exemple de code effectue également un travail pour que la sortie soit toujours ronde pour l'intervalle de pas actuel.

Answer 4

Pour obtenir la distribution que vous souhaitez, je pense que vous pouvez utiliser cette formule :

var value = Math.floor(-900 + 1000*Math.exp(i/10.857255959));

Voici une page autonome qui imprimera les valeurs que vous obtiendrez pour votre curseur 0-100, après les avoir passées dans cette formule :

<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>

Les nombres vont de 100 à 10 000 000 dans ce qui semble être la distribution souhaitée à mon œil de mathématicien rouillé. 8-)

Answer 5

Je cherchais Curseur logarithmique pour Angular mais je n'en trouve pas et puis je suis tombé sur cette réponse ,

Et j'ai créé cela pour Angular 2+ (la démo est en Angular 6) : DÉMO DE TRAVAIL

Merci à @sth pour l'extrait :

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;
   }
};