获取要随滑块值移动的滑块标签

Get label of slider to move with slider value

本文关键字：标签 移动 获取      更新时间：2024-06-17

Im使用仪表板中的滑块，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;
}

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

它不是你想要更改的值，它是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>

试着在这里做一个简单的数学运算，

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

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

演示

相关文章：