如何使两个不同的范围滑块输入显示相同的值，每当用户更新其中一个

How to make two different range slider inputs show the same value, whenever the user updates one of them?

本文关键字：更新 用户 一个 范围 何使两 输入 显示      更新时间：2023-09-26

所以当用户改变范围滑动条的值时，我希望两个范围滑动条都更新为相同的值。然后在P> span上打印相同的值。第二部分是工作的，但我不能让他们显示相同的值。(我希望范围滑块手柄是完全相同的为他们两个)额外:无论如何要将其转换为jQuery并从HTML中删除JS部分?谢谢你的宝贵时间。

HTML: 

<form>
    <label for="maximumReadTime">Maximale Leestijd</label>
    <input type="range" min="0" max="60" value="30" step="15" id="maximumReadTimeMobile" onchange="updateUserMaximumReadTime(this.value);">
    <p class="userMaximumReadTimeFeedback"><span id="userMaximumReadTimeMobile">30</span> min</p>
</form>
<form>
    <label for="maximumReadTime">Maximale Leestijd</label>
    <input type="range" min="0" max="60" value="30" step="15" id="maximumReadTime" onchange="updateUserMaximumReadTime(this.value);">
    <p class="userMaximumReadTimeFeedback"><span id="userMaximumReadTime">30</span> min</p>
</form>

JS:我已经测试了。value的范围输入，但它没有工作。

function updateUserMaximumReadTime(val) {
  document.getElementById('userMaximumReadTime').innerHTML = val;
  document.getElementById('userMaximumReadTimeMobile').innerHTML = val;
}

这里有一个简单的例子，可以帮助你找到正确的方向。

$('input[type=range]').on('change', function() {
  $('input[type=range]').val($(this).val())
});


$('input[type=range]').on('change', function() {
  $('input[type=range]').val($(this).val())
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
    <label for="maximumReadTime">Maximale Leestijd</label>
    <input type="range" min="0" max="60" value="30" step="15" id="maximumReadTimeMobile">
    <p class="userMaximumReadTimeFeedback"><span id="userMaximumReadTimeMobile">30</span> min</p>
</form>
<form>
    <label for="maximumReadTime">Maximale Leestijd</label>
    <input type="range" min="0" max="60" value="30" step="15" id="maximumReadTime">
    <p class="userMaximumReadTimeFeedback"><span id="userMaximumReadTime">30</span> min</p>
</form>

您可以为两个范围创建一个类。然后在更新时，您需要调用c allback函数，将此值应用于其他范围元素。

$('.rangeSlider').range({
    update : function (currentSlider){
        $('.rangeSlider').range({ value : currentSlider.value });
    }
 });

这是"如何做到"的例子。当我回家的时候，我会给你更详细的解释。

相关文章：