Rechter Algorithmus für abhängige Eingaben Typ Bereich

Question

Wie Prozent der Schieberegler (d. H. <input type="range">) zu berechnen, dass ihre Summe 100% ist;

Wenn in diesem Beispiel der zweite Schieberegler auf 95% gesetzt wird, werden andere Schieberegler auf 3% gesetzt. Wie man es repariert?

// Calculate fraction 
if (sum <= 0) { 
    fraction = 1/(depends.length - 1) 
} else { 
    fraction = val/sum; 
} 

// The last element will correct rounding errors 
if (i >= depends.length - 1) { 
    val = max - partial; 
} else { 
    val = Math.round(delta * fraction); 
    partial += val; 
} 

https://jsfiddle.net/vLaj37hf/

Answer 1

Sie versuchen, die Überprüfung können, wenn die Summe aller Werte von <input type="range"> größer ist als der Maximalwert ist die 100 ist. Wenn wahr, können Sie die Differenz finden und vom letzten Wert subtrahieren. Dies ist möglicherweise nicht die beste Lösung. Siehe unten.

var depends = document.querySelectorAll('.depend'); 
 

 
[].forEach.call(depends, function(depend) { 
 
    depend.onchange = function() { 
 
    s(this, this.value); 
 
    c(this); 
 
    } 
 
}); 
 

 
function c(current) { 
 
    var input = current.value; 
 
    var max = 100; 
 
    var delta = max - parseInt(input); 
 
    var sum = 0; 
 
    var partial = 0; 
 
    var siblings = []; 
 

 
    // Sum of all siblings 
 
    [].forEach.call(depends, function(depend) { 
 
    if (current != depend) { 
 
     siblings.push(depend); // Register as sibling 
 
     sum += +depend.value; 
 
    } 
 
    }); 
 

 
    // Update all the siblings 
 
    siblings.forEach(function(subling, i) { 
 

 
    var val = +subling.value; 
 
    var fraction = 0; 
 

 
    // Calculate fraction 
 
    if (sum <= 0) { 
 
     fraction = 1/(depends.length - 1) 
 
    } else { 
 
     fraction = val/sum; 
 
    } 
 

 
    // The last element will correct rounding errors 
 
    if (i >= depends.length - 1) { 
 
     val = max - partial; 
 
    } else { 
 
     val = Math.round(delta * fraction); 
 
     partial += val; 
 
    } 
 

 
    // Check if total of all range is greater than max value 
 
    var total = partial + parseInt(input); 
 
    if (total > max) { 
 
     var diff = total - max; // Calculate the difference 
 
     val = val - diff; // Update the value 
 
     partial = partial - diff; 
 
    } 
 

 
    s(subling, val); 
 
    }); 
 
} 
 

 
function s(el, value) { 
 
    var label = document.getElementById(el.id + '_value') 
 
    label.innerHTML = value; 
 
    el.value = value; 
 
}

<input type="range" class="depend" min="0" max="100" value="70" step="5" id="one"> 
 
<label id="one_value">70</label>% 
 
<br> 
 
<input type="range" class="depend" min="0" max="100" value="30" step="5" id="two"> 
 
<label id="two_value">30</label>% 
 
<br> 
 
<input type="range" class="depend" min="0" max="100" value="0" step="5" id="three"> 
 
<label id="three_value">0</label>% 
 
<br>