title: How to make two different range slider inputs show the same value, whenever the user updates one of them?
body: <p>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.) <strong>Extra:</strong> Is there anyway to convert this to jQuery and remove the JS part from the HTML? Thanks for your time.</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;form&gt;
      &lt;label for="maximumReadTime"&gt;Maximale Leestijd&lt;/label&gt;
      &lt;input type="range" min="0" max="60" value="30" step="15" id="maximumReadTimeMobile" onchange="updateUserMaximumReadTime(this.value);"&gt;
      &lt;p class="userMaximumReadTimeFeedback"&gt;&lt;span id="userMaximumReadTimeMobile"&gt;30&lt;/span&gt; min&lt;/p&gt;
  &lt;/form&gt;
  
  &lt;form&gt;
      &lt;label for="maximumReadTime"&gt;Maximale Leestijd&lt;/label&gt;
      &lt;input type="range" min="0" max="60" value="30" step="15" id="maximumReadTime" onchange="updateUserMaximumReadTime(this.value);"&gt;
      &lt;p class="userMaximumReadTimeFeedback"&gt;&lt;span id="userMaximumReadTime"&gt;30&lt;/span&gt; min&lt;/p&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p><strong>JS:</strong> I have tested .value on the range input but it did not work.</p>
  
  <pre><code>function updateUserMaximumReadTime(val) {
    document.getElementById('userMaximumReadTime').innerHTML = val;
    document.getElementById('userMaximumReadTimeMobile').innerHTML = val;
  }
  </code></pre>