'HTML range only updates once with JavaScript

Could you tell me why this simple code doesn't work? I would like to change the first slider the second one would change automatically.

<!DOCTYPE html>
<html lang="pt-br">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Canva</title>
    </head>
    <body >
        <input  type="range"  name="n1" id="id1"  value="5" step="2"  min="1" max="100" oninput="change()" onchange="change()" />
        </br>
        <input  type="range"  name="n2" id="id2"  value="2" step="2"  min="1" max="100" />
        <input  type="number" name="n3" id="id3" />
        <script>
              function change(){
                window.document.getElementById('id2').value = 10;
                window.document.getElementById('id3').value = 10;
              }
        </script>
    </body>
</html>
javascripthtmlrangeslider


Solution 1:[1]

Your issue lies in the way you use the change() function. You are resetting it to a default of 10 every time you update it rather than the value of id1.

<!-- ... -->
<script>
    // you don't need to say window.document.something
    // just say document.something
    function change() {
         const targetVal = document.getElementById('id1').value;
         // sets the value of `id2` and `id3`    
         document.getElementById('id2').value = targetVal;
         document.getElementById('id3').value = targetVal;
    }
</script>
<!--  ... -->

Solution 2:[2]

You are setting a fixed value 10 on change event, to have a dynamic value you can read the value from the event object that is passed to event listener callback from event.target.value:

id1.oninput = e => id2.value = e.target.value;
id3.oninput = e =>
id1.value = id2.value = e.target.value
<input type="range" name="n1" id="id1" value="5" step="2" min="1" max="100" />
</br>
<input type="range" name="n2" id="id2" value="2" step="2" min="1" max="100" />
<input type="number" name="n3" id="id3" />

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 Cesare Polonara

Related Questions