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

How do I get a slider control with 2 values?

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

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

Value 1: 100 Value 2: 0

值1:100值2:0

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

Value 1: 50 Value 2: 50

值1:50值2:50

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

Value 1: 0 Value 2: 100

值1:0值2:100

Edit: these are just examples when dragged there and not 'step'

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

Example:

Html Slider:

3 个解决方案

#1

If you need both values regardless the min and max and without knowing their values you can expand @Weedoze answer to reflect this

如果您需要两个值,无论最小值和最大值,并且不知道它们的值,您可以扩展@Weedoze答案以反映这一点

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>

#2

Just add a "step"-property to the input

只需在输入中添加“步骤”属性即可

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

value1 would be the input value and value2 = 100 - value1

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

#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>

#1