Question

因此，当用户更改范围滑块的值时，我希望两个范围滑块都更新为相同的值。然后在P＆gt;上打印相同的值。跨度。第二部分是工作，但我不能让他们显示相同的价值。（我希望范围滑块handel对于它们两者完全相同。）额外：是否有将此转换为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;
}

Answer 1

这是一个快速的例子，可以帮助您找到正确的方向。

$('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>

Answer 2

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

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

这是“如何做到”的例子。当我回到家时 - 我会为你提供更广泛的解释。

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

2 个答案: