Koordiniere zwei Bereichseingänge basierend auf einem Array von Ebenen

Question

Ich habe eine App, in der zwei "Schieberegler" (HTML-Bereich Eingänge) miteinander interagieren, die Aktualisierung der jeweils anderen. Ich versuche, meinen Kopf über den besten Ansatz auf hoher Ebene zu legen, was ich tun muss. Ursprünglich wurden die Schieberegler auf einer konsistenten Ganzzahl von '16' aktualisiert. Zum Beispiel:

Bereich 1

<input id="range-2" type='range' min='1' max='7' step='1' /> 

Bereich 2

<input type='range' min='0' max='96' step='16' id="range-3" /> 

Zu Beginn der Aktualisierung der Zuwachs der entweder Schieber wurde in Bezug auf die Schritte direkt korreliert. Wenn Sie beispielsweise den ersten Schieberegler von "1" auf "4" setzen, würde der zweite Schieberegler ebenfalls 3 Stufen von 0 bis 48 nehmen. Nun möchte der Client verschiedene Werte basierend auf dem Schritt, auf dem sich der Benutzer gerade befindet. Wenn Sie beispielsweise slider 1 von "1" auf "2" ändern, wird slider 2 von "0" auf "4" gesetzt, aber die Änderung slider 1 von "2" auf "3" wird slider 2 von "8" nach "16" übernehmen. Grundsätzlich gibt es keine Konstante mehr. Ich frage mich nur, was der beste Ansatz dafür ist.

Die neuen Werte werden als mit der linken Spalte zeigt Änderungen in slider 1 und der Zuwachs folgt die slider 2 aktualisieren würde:

1 to 2 => 4 
2 to 3 => 8 
3 to 4 => 16 
4 to 5 => 16 
5 to 6 => 24 
6 to 7 => 12 

Mein neuer Bereich 2 würde in etwa so aussehen:

<input type='range' min='0' max='80' step='4' id="range-3" /> 

Hat jemand irgendwelche Ideen für mich?

Answer 1

Es gibt wahrscheinlich viele verschiedene Möglichkeiten, das zu tun. Eine Möglichkeit besteht darin, die Korrespondenztabellen zwischen den beiden Bereichen vorzuberechnen.

var slider = [ 
 
     document.getElementById('range-1'), 
 
     document.getElementById('range-2') 
 
    ], 
 
    fromSlider = [ [], [] ]; 
 

 
function initSliderTables(step) { 
 
    var p = 0; 
 

 
    step.concat(0).forEach(function(s, i) { 
 
    for(var j = 0; j <= s; j++) { 
 
     fromSlider[1][p + j] = i + 1; 
 
    } 
 
    fromSlider[0][i + 1] = p; 
 
    p += s; 
 
    }); 
 
} 
 

 
function update(from) { 
 
    slider[from^1].value = fromSlider[from][slider[from].value]; 
 
    
 
    document.getElementById('debug0').innerHTML = slider[0].value; 
 
    document.getElementById('debug1').innerHTML = slider[1].value; 
 
} 
 

 
initSliderTables([ 4, 8, 16, 16, 24, 12 ]); 
 
update(0);

<input id="range-1" type='range' onchange="update(0)" min='1' max='7' step='1' /> 
 
<span id="debug0"></span><br> 
 
<input id="range-2" type='range' onchange="update(1)" min='0' max='80' step='4' /> 
 
<span id="debug1"></span>

Wir können die for Schleife vermeiden, indem Sie:

step.concat(1).forEach(function(s, i) { 
    fromSlider[1] = fromSlider[1].concat(Array(s).fill(i + 1)); 
    fromSlider[0][i + 1] = p; 
    p += s; 
}); 

ist jedoch .fill() noch nicht von allen Browsern unterstützt.

Answer 2

Ein sauberer Weg könnte sein, ein Array mit Inkrementen zu definieren und es zum Definieren von Bereichseinstellungen zu verwenden. In diesem Beispiel schreibe ich ein einfaches Inkrement, weil ich nicht verstanden habe, was genau Sie brauchen, aber das ist die Idee, dann können Sie einfach die Operation 'Ändern' ändern.

var increments = [0,4,8,16,16,24,12]; 

$('#range-3').attr('max', increments.reduce((a, b) => a + b, 0)); 
$('#range-3').attr('step', Math.min.apply(null,increments.slice(1,increments.length))); 

$('#range-2').on('change', function() { 
    $('#range-3').val($('#range-2').val() + increments[$(this).val()-1]); 
}); 

Here a sample jsfiddle