javascript - 如何获得具有 2 个值的 slider 控件？

Question

如何获得具有 2 个值的 slider 控件？

|............

值 1:100值 2:0

......|.....

值 1:50值 2:50

............|

值 1:0值 2:100

编辑:这些只是拖到那里的例子，而不是“步骤”

Example:

Html Slider:

Answer 1

如果您需要这两个值，而不管 min 和 max 并且不知道它们的值，您可以扩展@Weedoze 答案以反射(reflect)这一点

function updateTextInput(val) {
	var value1 = Number(val) - Number(document.getElementById('range').min);
	document.getElementById('value1').innerHTML = "value1: "+value1;
	var value2 = Number(document.getElementById('range').max) - Number(val);
	document.getElementById('value2').innerHTML = "value2: "+value2;
}

0<input id="range" type="range" name="rangeInput" min="0" max="200" onchange="updateTextInput(this.value);">200
<br />
<p id="value1"></p>
<p id="value2"></p>