Logarithmischer Schieberegler

Question 1

Ich habe einen Schieberegler mit Werten zwischen 0 und 100.

Ich möchte sie einem Bereich von 100 bis 10.000.000 zuordnen.

Ich habe einige Funktionen im Internet gesehen, aber sie sind alle in C ++. Ich brauche es in Javascript.

Irgendwelche Ideen?

Question 2

Sie können eine Funktion wie diese verwenden:

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

Die resultierenden Werte stimmen mit einer logarithmischen Skala überein:

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

Die umgekehrte Funktion würde, mit den gleichen Definitionen für minp, maxp, minv, maxvund scaleeine Schieberposition von einem Wert wie folgt berechnen:

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

Alles in allem würde es in einer Klasse und als Funktionscode-Snippet so aussehen:

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

Erweitern Sie das Snippet

Question 3

Ich denke, Sie können diese Formel verwenden, um die gewünschte Verteilung zu erhalten:

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

Hier ist eine in sich geschlossene Seite, auf der die Werte gedruckt werden, die Sie für Ihren Schieberegler 0-100 erhalten, nachdem Sie diese Formel durchlaufen haben:

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

Die Zahlen reichen von 100 bis 10.000.000, was für mein mathematisch verrostetes Auge die gewünschte Verteilung ist. 8-)

Question 4

Nicht ganz die Frage zu beantworten, aber für Interessenten ist die umgekehrte Zuordnung der letzten Zeile

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

nur um zu dokumentieren.

HINWEIS Der Wert muss> 0 sein.

Question 5

Das Problem mit einem echten logarithmischen Schieberegler liegt am unteren Ende. Mehrere Punkte auf dem Schieberegler führen wahrscheinlich zu doppelten Werten.

Aus rein UI-Sicht bietet es auch keine sehr intuitive Ausgabe für die Benutzereingaben.

Ich denke, eine bessere Option ist die Verwendung einer "gestuften" Transformation mit gleichmäßiger Verteilung.

Mit anderen Worten, wir geben eine Reihe von Inkrementen an, die wir verwenden möchten (z. B. 1, 10, 100, 1000). Dann teilen wir den Schieberegler basierend auf der Anzahl der von uns definierten Inkremente in gleiche Teile. Wenn wir durch unsere verschiedenen Abschnitte gleiten, wird die Schiebereglerausgabe um das jeweilige Inkrement erhöht.

ARBEITSDEMO

REAKTIEREN SIE DEN CODE

Im obigen Beispiel definieren wir unseren min, maxund intervalsArray.

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

Wir müssen dann die Anzahl der diskreten Werte ermitteln, die unser Schieberegler haben muss, damit er basierend auf unseren definierten Intervallverteilungen ordnungsgemäß von min nach max wechselt.

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

In diesem Fall 535.

Hinweis : Ihre Schiebereglerpunkte sollten die Anzahl der Pixel im Schieberegler nicht überschreiten

Schließlich transformieren wir unsere Ausgabe einfach mit dem oben beschriebenen Algorithmus. Das Codebeispiel erledigt auch einige Arbeiten, sodass die Ausgabe für das aktuelle Schrittintervall immer rund ist.

Question 6

Ich habe nach dem logarithmischen Schieberegler für Winkel gesucht , kann aber keinen finden und bin dann auf diese Antwort gestoßen.

Und ich habe das für Angular 2+ erstellt (Demo ist in Angular 6): WORKING DEMO

Vielen Dank an @sth für den Ausschnitt:

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