基于级别数组协调两个范围输入
Coordinate two range inputs based on an array of levels
我有一个应用程序,其中两个"滑块"(HTML范围输入)相互交互,一个更新另一个。我正试图找到我需要做的最好的高级方法。最初,滑块更新为"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" />
最初,更新任一滑块的增量是根据步长直接相关的。例如,将第一个滑块从"1"更新为"4"也会使第二个滑块从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" />
有人对我有什么初步想法吗?
可能有很多不同的方法。一种可能性是预先计算两个范围之间的对应表。
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()
并不是所有浏览器都支持。
一个干净的方法可以是定义一个带增量的数组,并使用它来定义范围设置;在这个例子中,我写了一个简单的增量,因为我不明白你的确切需求,但这就是想法,然后你可以简单地更改"change"事件的操作。
var increments = [0,4,8,16,16,24,12];
$('#range-3').attr('max', increments.reduce((a, b) => a + b, 0));
$('#range-3').attr('step', Math.min.apply(null,increments.slice(1,increments.length)));
$('#range-2').on('change', function() {
$('#range-3').val($('#range-2').val() + increments[$(this).val()-1]);
});
这里是一个示例jsfiddle
相关文章:
- 如何从日期范围选择器中获取两个日期
- 在两个浏览器选项卡之间共享变量范围
- 在Jquery或Javascript中获取两个范围或日期之间的通信周数
- 连接angularjs中的两个范围模型
- 角度,用两个点设置范围变量
- 选择绑定到同一范围的按钮,单击时会相互触发.如何从angular.js中的两个选择列表按钮解除范围绑定
- 使用javascript获取两个输入范围的值
- 如何放置日期范围从周选择器用于两个文本输入
- 正则表达式用于验证两个范围之间的数字
- Javascript:在范围内生成随机数,避免前两个
- 日期范围选取器 在两个日历上显示结束日期
- 无论哪一天,如何获得两个小时范围内的时间
- Google 应用脚本:返回 2 个两个范围之间唯一值的函数
- 生成两个范围之间的日期(js)
- 如何将两个范围值相加,然后乘以一个select标记
- 在javascript中获取两个范围之间的交集
- 在morris.js折线图中绘制两个范围的y轴
- 同时更改两个范围- javascript
- 基于级别数组协调两个范围输入
- 是否可以在一个简短的内联事件中滑动两个范围输入元素