title: Dynamically add input slider with value
body: <p>My goal is to be able to dynamically add range inputs onto a web page via javascript. I am using the following code for the sliders</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="slidecontainer"&gt;
      &lt;input type="range" min="1" max="100" value="50" class="slider" id="myRange"&gt;
      &lt;p&gt;Value: &lt;span id="demo"&gt;&lt;/span&gt;&lt;/p&gt;
  &lt;/div&gt;
  &lt;script&gt;
      var slider = document.getElementById("myRange");
      var output = document.getElementById("demo");
      output.innerHTML = slider.value;
      slider.oninput = function() {
          output.innerHTML = this.value;
      }
  &lt;/script&gt;
  </code></pre>
  
  <p><a href="https://www.w3schools.com/howto/howto_js_rangeslider.asp" rel="nofollow noreferrer">https://www.w3schools.com/howto/howto_js_rangeslider.asp</a></p>
  
  <p>I have tried using innerHtml, document.createElement("input"), and templates to achieve this. I am able to draw the slider however I am unable to get the value to print and show any help would be appreciated on how to achieve this.</p>
  
  <p>This is my most recent attempt</p>
  
  <p>Script</p>
  
  <pre><code>function showContent() {
    var temp = document.getElementsByTagName("template")[0];
    var clon = temp.content.cloneNode(true);
    document.body.appendChild(clon);
  }
  Template.myTemplate.rendered = function(){
  document.getElementById("slider").oninput = function() {
      myFunction()
  };
  function myFunction() {
     var val = document.getElementById("slider").value //gets the oninput value
     document.getElementById('output').innerHTML = val //displays this value to the html page
     console.log(val)
  }
  &lt;/script&gt;
  
  &lt;template name="myTemplate"&gt;
   &lt;input id="slider" type="range" min="50" max="100" step="10"  value="50"&gt;
   &lt;output id="output"&gt;abc&lt;/output&gt;
  &lt;/template&gt;
  
  &lt;button class = "button" onclick="showContent()"&gt;Copy text&lt;/button&gt;
  </code></pre>
  
  <p>I also tried this thanks to MMDM which resulted in the 3 ranges drawing and 3 values being shown however, they do not update.</p>
  
  <pre><code>&lt;script&gt;
  window.onload = function() 
  {
  var titles = ["demo1", "demo2", "demo3"];
  
  for(var i = 0; i &lt; 3; i++)
  {
    var container = document.getElementsByClassName('slidecontainer')[0];
    var slider = document.createElement("input");
    slider.type = 'range';
    slider.value = 50;
    container.prepend(slider);
    container.innerHTML += ("&lt;p&gt;Value: &lt;span id=" + titles[i] +"&gt;&lt;/span&gt;&lt;/p&gt;")
  
    var output = document.getElementById(titles[i]);
    output.innerHTML = slider.value;
  
    slider.oninput = function() {
      output.innerHTML = this.value;
    }
  }
  
  }
  
  &lt;/script&gt;
  
  &lt;div class="slidecontainer"&gt;
  
  &lt;/div&gt;
  </code></pre>