title: Bootstrap range slider class name in JS
body: <p>I am using a bootstrap Range Slider with the text below as percentage. I need help with the JS code where presently it is calling the HTML element as the document.getEelementByID </p>
  
  <p>I want the same thing to happen but with document.getElementByClassName as there will be many input field in my project. Below is the following code</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 slider = document.getElementById("myRange");
  var output = document.getElementById("percent");
  output.innerHTML = slider.value; // Display the default slider value
  
  // Update the current slider value (each time you drag the slider handle)
  slider.oninput = function() {
      output.innerHTML = this.value;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;input  type="range" min="0" max="100" value="50"  id="myRange" &gt;
        &lt;span id="percent"&gt;&lt;/span&gt;</code></pre>
  </div>
  </div>
  </p>