通过javascript更改宽度时输入范围的奇怪行为

Question

我有一组滑块，它们都可以取 0 到 100 之间的值。我需要组的总数始终小于 100，因为它们是百分比。我使用 max 属性和一些简单的数学来防止总数超过这个值。 最初我只是更改了最大值，但是，这并没有改变滑块的长度，只是一直向右的值。这会让用户感到困惑，因为 50% 的栏可能在过去位于中间时一直是正确的。

为了解决这个问题，我使用了一个容器 div，并将滑块的宽度更改为包含 div 的相应百分比。

这按预期工作，但每当您更改同级滑块时，滑块手柄会稍微移动。

有没有办法防止这些小动作。

有没有一种完全不同的更简单的方法来完成这个看似简单的任务，只使用纯 js。

    <form id="form">
        <input id="incm" type="number" value="1000"/>
        <ul>
            <li>Slider 0
                <div class="sliderContainer"><input class="slider" id="pct0" type="range" min="0" max="100" value = "50"/></div>
                <output id="pctOutput0"></output>
                <output id="amtOutput0"></output>
                </li>

            <li>Slider 1
                    <div class="sliderContainer"><input class="slider" id="pct1" type="range" min="0" max="100" value = "50"/></div>
                    <output id="pctOutput1"></output>
                    <output id="amtOutput1"></output>
                    </li>

            <li>Slider 2
                    <div class="sliderContainer"><input class="slider" id="pct2" type="range" min="0" max="100" value = "0"/></div>
                    <output id="pctOutput2"></output>
                    <output id="amtOutput2"></output>
                    </li>

            <li>Slider 3
                    <div class="sliderContainer"><input class="slider" id="pct3" type="range" min="0" max="100" value = "0"/></div>
                    <output id="pctOutput3"></output>
                    <output id="amtOutput3"></output>
                    </li>

            <li>Slider 4
                    <div class="sliderContainer"><input class="slider" id="pct4" type="range" min="0" max="100" value = "0"/></div>
                    <output id="pctOutput4"></output>
                    <output id="amtOutput4"></output>
                    </li>
            </ul>


            <p><output id="pctSum"></output><output id="amtSum"></output></p>
        </form>

function calc() {

  var pct = [],
      pctI = [],
      amt = [],
      incm = document.getElementById("incm").value

  for (i = 0; i < 5; i++) {
    pct[i] = document.getElementById("pct" + i).value
    document.getElementById("pctOutput" + i).innerHTML = pct[i] + "%"
    pctI[i] = parseInt(pct[i])

    amt[i] = pctI[i] * 0.01 * incm
    document.getElementById("amtOutput" + i).innerHTML = "£" + amt[i]
  }

  var pctSum = pctI.reduce((a,b) => a + b, 0)
  var amtSum = amt.reduce((a,b) => a + b, 0)

  document.getElementById("pctSum").innerHTML = "Total Percentage " + pctSum + "%"
  document.getElementById("amtSum").innerHTML = "Total Amount £" + amtSum

  for (i = 0; i < 5; i++) {
    document.getElementById("pct" + i).max = 100 - pctSum + pctI[i]

    document.getElementById("pct" + i).style.width = document.getElementById("pct" + i).max + "%"
  }
}

document.getElementById("form").addEventListener("input", calc)
window.onload = calc()

JSFiddle https://jsfiddle.net/Zbedjajohnson/ca5b1psy/5/

Answer 1

非常有趣的问题。这是我想出的。

function initSliderGroups() {
  const sliderGroups = document.querySelectorAll(".sliderGroup");

  for (let sliderGroup of sliderGroups) {
    const sliders = [...sliderGroup.querySelectorAll(".slider")];
    const max = sliderGroup.getAttribute('max');
    sliders.forEach(slider => {
      slider.max = max;
      slider.min = 0;

      const sliderContainer = document.createElement('span');
      sliderContainer.style = 'position: relative;';
      slider.parentNode.insertBefore(sliderContainer, slider);
      sliderContainer.appendChild(slider);

      const limitDiv = document.createElement('div');
      limitDiv.className = 'limitDiv';
      limitDiv.style = 'position: absolute; top: 4px; left: 0; z-index: 1; width: 0; height: 5px; background-color: #555; border-radius: 5px;';
      sliderContainer.appendChild(limitDiv);

      slider.addEventListener("input", () => onSliderInput(slider));
    });
    
    function onSliderInput(movingSlider) {
      //limit sum of values to max (defined as 100 by .sliderGroup div attribute)
      const usedByOthers = sliders.filter(s => s !== movingSlider).map(s => +s.value).reduce((a, b) => a + b);
      const available = max - usedByOthers;
      if (movingSlider.value > available) movingSlider.value = available;

      //update limit bars
      for (let slider of sliders) {
        const limitDiv = slider.parentNode.querySelector('.limitDiv');

        const usedByOthers = sliders.filter(s => s !== slider).map(s => +s.value).reduce((a, b) => a + b);
        const available = max - usedByOthers;

        const sliderWidth = slider.clientWidth + 1;
        const leftOffset = sliderWidth * (available / max);
        const width = sliderWidth - leftOffset;
        const extraOffset = 17 * (max - available) / max;
        limitDiv.style.left = Math.min(leftOffset + extraOffset, sliderWidth) + 'px';
        limitDiv.style.width = Math.max(width - extraOffset, 0) + 'px';
      }
    }
    
    //init
    if (sliders[0]) onSliderInput(sliders[0]);
  }
}

initSliderGroups();

<div class="sliderGroup" max="100">
  <input class="slider" type="range" value="25" /><br/>
  <input class="slider" type="range" value="0" /><br/>
  <input class="slider" type="range" value="0" /><br/>
  <input class="slider" type="range" value="0" /><br/>
</div>

基本上，您只需提供所有滑块输入 class="slider"，将它们包装在带有 class="sliderGroup" max="100" 的元素中，然后调用 initSliderGroups()，它会将这些滑块的最大组合值限制为 100（并显示深灰色限制条）。

在您的情况下，您将执行以下操作：

• 将class="sliderGroup" max="100" 添加到您的<ul>。
• 在您的 javascript 上方添加我的 javascript。
• 删除 calc 中的 for 循环，这会更改滑块的 max 和 width。