title: How to use Material Components Web Foundations
body: <p>Using Material Components, I am trying to figure out how to use the methods of the Foundations of the components.</p>
  
  <p>For an example, I have </p>
  
  <pre><code>&lt;div role="progressbar" class="mdc-linear-progress"&gt;
    &lt;div class="mdc-linear-progress__buffering-dots"&gt;&lt;/div&gt;
    &lt;div class="mdc-linear-progress__buffer"&gt;&lt;/div&gt;
    &lt;div class="mdc-linear-progress__bar mdc-linear-progress__primary-bar"&gt;
      &lt;span class="mdc-linear-progress__bar-inner"&gt;&lt;/span&gt;
    &lt;/div&gt;
    &lt;div class="mdc-linear-progress__bar mdc-linear-progress__secondary-bar"&gt;
      &lt;span class="mdc-linear-progress__bar-inner"&gt;&lt;/span&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and in my JS I have </p>
  
  <pre><code>const bar = $('.mdc-linear-progress')[0];
  
  const MDCLinearProgress = mdc.linearProgress.MDCLinearProgress;
  const MDCLinearProgressFoundation = mdc.linearProgress.MDCLinearProgressFoundation;
  
  const progress = new MDCLinearProgress(bar);
  const progressFoundation = new MDCLinearProgressFoundation(bar);
  
  progressFoundation.setProgress(0.5);
  </code></pre>
  
  <p>as you can see my goal is trying to use methods like <code>setProgress</code> from the <code>MDCLinearProgressFoundation</code> class. Though this isn't working and I'm unsure as to what I'm doing wrong as it gives no error either.</p>
  
  <p>Codepen - <a href="https://codepen.io/ErraticFox/pen/LdwYxb" rel="nofollow noreferrer">https://codepen.io/ErraticFox/pen/LdwYxb</a></p>