坐标两个基于数组的水平范围输入

我有一个应用程序，其中两个“滑块”（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'将使第二个滑块3也升高，从0到48.现在，客户端根据用户当前所处的步骤需要不同的值。例如，将slider 1从“1”更改为“2”将从“0”到“4”取slider 2，但将slider 1从“2”更改为“3”将从“8”到“16”取slider 2。基本上，不再是一个常数。我只是想知道最好的高层次方法是什么。

新的值是在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" />

任何人对我有任何开始的想法？

来源

2016-08-02 JordanBarber

可能有这样做的许多不同的方式。一种可能性是预先计算两个范围之间的对应表。

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()尚未被所有的浏览器都支持。

来源

2016-08-02 16:30:03 Arnauld

很高兴帮助。请注意，我发布了几分钟与IE不兼容的编辑版本。我自回滚并将备用代码添加为脚注。确保使用最适合您需求的那种。 – Arnauld

干净的方法可能是定义一个增量数组，并用它来定义范围设置;在这个例子中，我写了一个简单的增量，因为我不明白你确切的需求，但这是想法，那么你可以简单地改变'改变'事件的操作。

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]); 
});

Here a sample jsfiddle

来源

2016-08-02 16:27:33 Luca

坐标两个基于数组的水平范围输入

回答

相关问题