Control variable with slider
<p>I want to control the variable length with a range slider, such that the slider can be able to increase or reduce length of the line. </p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
   
var slider = document.getElementById("slider");
var length = 450

context.beginPath();
context.moveTo(100, 100);
context.lineTo(length, 100);
context.stroke();
   
   
slider.addEventListener("change", function() { 
   length = slider.value;  
})

setInterval(function() {
  length = slider.value;
 
}, 100)</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE HTML&gt;
&lt;html&gt;
  &lt;head&gt;    
  &lt;/head&gt;
  &lt;body&gt;
  &lt;input id="slider" type="range" min="1" max="578" step="1" value="50" &gt; 
    &lt;canvas id="myCanvas" width="578" height="200"&gt;&lt;/canvas&gt;
    
  &lt;/body&gt;
&lt;/html&gt;    </code></pre>
</div>
</div>
</p>