javascript - 根据级别数组协调两个范围输入

Question

我有一个应用程序，其中两个“ slider ”(HTML 范围输入)相互交互，更新一个 slider 会更新另一个 slider 。我正在尝试用最好的高层方法来完成我需要做的事情。最初， slider 更新为一致的整数“16”。例如:

范围 1

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

范围 2

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

最初，更新任一 slider 的增量与步数直接相关。例如，将第一个 slider 从“1”更新为“4”将使第二个 slider 也从 0 上升 3 步到 48。现在，客户端需要根据用户当前所处的步骤获得不同的值。例如，将 slider 1 从“1”更改为“2”，会将 slider 2 从“0”更改为“4”，但更改 slider 1 从“2”到“3”将使 slider 2 从“8”到“16”。基本上，不再是一个常数。我只是想知道最好的高级方法是什么。

新值如下，左列显示 slider 1 中的更改以及更新 slider 2 的增量:

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

我的新范围 2 看起来像:

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

有人可以给我一些开始的想法吗？

Answer 1

可能有很多不同的方法可以做到这一点。一种可能性是预先计算两个范围之间的对应表。

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>

我们可以通过执行以下操作来避免 for 循环:

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

但是，并非所有浏览器都支持 .fill()。