従属入力タイプ範囲の正しいアルゴリズム

Question

スライダーのパーセンテージ（つまり、<input type="range">）を計算する方法、その合計が100％であること。

この例では、2番目のスライダ値を95％に設定すると、他のスライダ値が3％に設定されます。それを修正するには？

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

<input type="range">のすべての値の合計が100で最大値を超えている場合は、チェックを試すことができます。真の場合、差を求めて最後の値から差し引くことができます。これは最善の解決策ではないかもしれません。下記を参照してください。代わりに、 "5" の

に "2" のすべての `input`コンポーネントの "ステップ" を設定

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>