相关输入类型范围的正确算法

Question

如何计算滑块的百分比（即<input type="range">），它们的总和为100%；

在这个例子中，当我将第二个滑块值设置为 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。如果为真，您可以找到差异并将其从最后一个值中减去。这可能不是最好的解决方案。请看下面。

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>

相关输入类型范围的正确算法

Right algorithm for dependent inputs type range

javascript

range

percentage