Vera Perrone Vera Perrone - 2 months ago 12
Javascript Question

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

So when ever the user changes the value of the range slider I want that both range sliders get updated to the same value. The same value will then be printed on the P > span. The second part is working but I can't get them to show the same value. (I want the range slider handel to be exact the same for both of them.) Extra: Is there anyway to convert this to jQuery and remove the JS part from the HTML? Thanks for your time.

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: I have tested .value on the range input but it did not work.

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

Answer

Here's a quick example that should help get you in the right direction.

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