爲三值同步三個滑動條

Question

如何同時爲三個值同步三個滑動條？

例如：

function showValue(newValue) { 
 
     document.getElementById("range-one").innerHTML = newValue; 
 
    }

<input type="range" id="sliderBarTwo" min="0" max="100" step="1" value="0" onchange="showValue(this.value)"> 
 
<span id="range-one">0</span>

但在這裏，我看到的只有一個值

Answer 1

這可以在許多不同的方式來完成，這裏是一個例子，如果你真的卡住了。

function showValue(newValue, resultDiv) { 
 
    document.getElementById(resultDiv).innerHTML = newValue; 
 
    updateSum(); 
 
} 
 

 
function updateSum() { 
 
    var sliderOneValue = +document.getElementById('sliderBarOne').value; 
 
    var sliderTwoValue = +document.getElementById('sliderBarTwo').value; 
 
    var sliderThreeValue = +document.getElementById('sliderBarThree').value; 
 
    document.getElementById('sum').innerHTML = sliderOneValue + sliderTwoValue + sliderThreeValue; 
 
}

<input type="range" id="sliderBarOne" min="0" max="100" step="1" value="0" onchange="showValue(this.value, 'range-one')"> 
 
<span id="range-one">0</span> 
 
<br> 
 
<input type="range" id="sliderBarTwo" min="0" max="100" step="1" value="0" onchange="showValue(this.value, 'range-two')"> 
 
<span id="range-two">0</span> 
 
<br> 
 
<input type="range" id="sliderBarThree" min="0" max="100" step="1" value="0" onchange="showValue(this.value, 'range-three')"> 
 
<span id="range-three">0</span> 
 
<br>Sum: <span id="sum">0</span>