title: Dynamically setting value of input from <template>
body: <p>I am attempting to dynamically draw a range input, I have managed to get this far where on a button click a new range slider is created where the value will be constantly updated. What I now wish to do is to set the value of min, max, 
   and value from the draw_slider function. </p>
  
  <p>The problem is I am unable to set the vars of input range slider, such as min, max, value.</p>
  
  <p>I have attempted to get the child element of temp by</p>
  
  <pre><code>    var slider = [temp.children].filter(x=&gt; x.className == "slider")[0];
      slider.value = 10;
  </code></pre>
  
  <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>    function draw_slider()
      {
        var temp = document.querySelector('#slider_template');
        var clon = temp.content.cloneNode(true);
        var menu_location = document.querySelectorAll(".menu_section")[0];
        menu_location.appendChild(clon);
      }
      function set_up_events()
      {
       document.querySelectorAll(".slidecontainer").forEach(function(element) {
          var slider = [...element.children].filter(x=&gt; x.className == "slider")[0];
          var output = [...element.children].filter(x=&gt; x.className == "slider-value")[0];
          slider.oninput = function() {
            output.innerHTML = this.value;
          }
        });
      }
       
      function setup_menu()
      {
        draw_slider();
        set_up_events(); 
      }
      </code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>    &lt;template id="slider_template"&gt;
      &lt;div class="slidecontainer"&gt;
          &lt;input class="slider" type="range" min="1" max="100" value="50" class="slider" id="myRange"&gt;
          &lt;br&gt;  
          &lt;span&gt;Value:&lt;/span&gt;&lt;span class="slider-value"&gt;&lt;/span&gt;
          &lt;br&gt;  
      &lt;/div&gt;
      &lt;/template&gt;
      &lt;div class="menu_section"&gt;
         
      &lt;/div&gt;
  
      &lt;button class = "button" onclick="setup_menu()"&gt;Copy text&lt;/button&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Thank you for your help.</p>