Question

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

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

价值1：100 值2：0

... | .....

价值1:50 价值2:50

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

值1：0 价值2：100

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

Example:

Html Slider:

Answer 1

只需在输入中添加＆＃34;步骤＆＃34; -property

<input
    type="range"
    name="points"
    id="points"
    step="50"
    value="50"
    min="0"
    max="100">

value1将是输入值，value2 = 100 - value1

Answer 2

如果您需要min和max两个值，并且不知道其值，则可以展开@Weedoze回答以反映此

＆＃13;

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

＆＃13;

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>

＆＃13;

Answer 3

function updateTextInput(val) {
  document.getElementById('value').innerHTML = val;
}

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

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

3 个答案: