title: Add a class to table depending on slider value
body: <p>I have a working script that adds padding to table cells based on the value of a user-configurable slider. The slider value goes from 15 to 30.</p>
  <pre><code>var slider = document.getElementById(&quot;myRange&quot;);
  var output = document.getElementById(&quot;padding-slider&quot;);
  output.innerHTML = slider.value;
  
  slider.oninput = function() {
   output.innerHTML = this.value;
        var items = document.getElementsByClassName(&quot;cell&quot;);
   for (var i=0; i &lt; items.length; i++) {
     items[i].style.padding =  this.value + &quot;px 0&quot;;
   }
  }
  </code></pre>
  <p>I additionally want to add classes to the <code>table</code> based on the slider value:</p>
  <p>18  =  <code>.font-med</code></p>
  <p>24  =  <code>.font-lrg</code></p>
  <p>30  =  <code>.font-x-lrg</code></p>
  <p><a href="https://codepen.io/stevland/pen/rNxQLYb" rel="nofollow noreferrer">codepen</a>  <a href="https://jsfiddle.net/stevland/j27vh4w1/2/" rel="nofollow noreferrer">jsfiddle</a></p>