Question

我使用仪表板中的滑块，HTML代码如下：

<!-- Range Slider Start -->
<label id="labelslider" for="slider">Selecteer Range</label> <!-- Range -->
<input type="range" id="slider" min="0" max="100" value="0" step="10" oninput="outputUpdate(value)" />
<output for="slider" id="range">0</output>
<!-- END Range Slider -->

我正在使用JavaScript的以下位来获取滑块值的输出：

function outputUpdate(vol) {
    document.querySelector('#range').value = vol;
}

这很好用，但是输出值总是在滑块的开头，我想在滑块从左向右移动时移动输出的值。

Answer 1

尝试在这里做一个简单的数学，

function outputUpdate(vol) {
    document.querySelector('#range').value = -(vol - 100);
}

最初在html中将滑块value设置为100。现在，您可以将滑块从right移动到left，其值范围从0到100，方向相同。

DEMO

Answer 2

你想改变它的价值不是innerHTML，并且明确表示在IE10中不支持oninput，所以使用onchange insted。我还将你的选择器改为getElementById（）：

function outputUpdate(vol) {
    document.getElementById('range').innerHTML = vol;
}

<label id="labelslider" for="slider">Selecteer Range</label> <!-- Range -->
<input type="range" id="slider" min="0" max="100" value="0" step="10" onchange="outputUpdate(value)" />
<output for="slider" id="range">0</output>

获取滑块标签以使用滑块值移动

2 个答案:

DEMO