How do I get a slider control with 2 values?

Question

How do I get a slider control with 2 values?

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

Value 1: 100 Value 2: 0

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

Value 1: 50 Value 2: 50

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

Value 1: 0 Value 2: 100

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

Example:

Html Slider:

Answer 1

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

Answer 2

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

 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> 

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>