javascriptmaterial-designmaterial-components

Getting "uncaught type error" when trying to instantiate MDCSlider (pure JavaScript)

Following the offical instructions I cannot get an MDCSlider working. It displays but does not react (Tried Chrome, Firefox, Edge).

Full stack trace:

caught TypeError: Cannot read properties of undefined (reading 'addEventListener')
    at Object.registerInteractionHandler (material-components-web.min.js:1:423625)
    at y.registerRootHandlers (material-components-web.min.js:1:10842)
    at y.init (material-components-web.min.js:1:8957)
    at y.a (material-components-web.min.js:1:2397)
    at new y (material-components-web.min.js:1:5773)
    at t (material-components-web.min.js:1:423774)
    at C.createRipples (material-components-web.min.js:1:423874)
    at C.initialize (material-components-web.min.js:1:421464)
    at C.a (material-components-web.min.js:1:2301)
    at new C (material-components-web.min.js:1:423923)

HTML is as follows:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link
      href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css"
      rel="stylesheet"
    />
    <script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>
  </head>
</html>
<body>
  <div class="mdc-slider">
    <div class="mdc-slider__track">
      <div class="mdc-slider__track--inactive"></div>
      <div class="mdc-slider__track--active">
        <div class="mdc-slider__track--active_fill"></div>
      </div>
    </div>
    <div
      class="mdc-slider__thumb"
      role="slider"
      tabindex="0"
      aria-label="Continuous slider demo"
      aria-valuemin="0"
      aria-valuemax="100"
      aria-valuenow="50"
    >
      <div class="mdc-slider__thumb-knob"></div>
    </div>
  </div>
  <script src="script.js"></script>
</body>

And the tiny script.js:

const MDCSlider = mdc.slider.MDCSlider;
const element = document.querySelector(".mdc-slider");
const slider = new MDCSlider(element);

Been searching the net up and down. I found a JSFiddle that works (https://jsfiddle.net/klyakh/oky0zf7e/1/), but it does not show the full HTML, so I am lost.

Solution

  • The body was outside of the HTML, but the actual problem is the version, the working example you posted is using this version:

    https://unpkg.com/material-components-web@8.0.0/dist/material-components-web.js

    https://unpkg.com/material-components-web@8.0.0/dist/material-components-web.css

        <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <link href="https://unpkg.com/material-components-web@8.0.0/dist/material-components-web.css" rel="stylesheet" />
        <script src="https://unpkg.com/material-components-web@8.0.0/dist/material-components-web.js"></script>
      </head>
      <body>
        <div class="mdc-slider">
          <div class="mdc-slider__track">
            <div class="mdc-slider__track--inactive"></div>
            <div class="mdc-slider__track--active">
              <div class="mdc-slider__track--active_fill"></div>
            </div>
          </div>
          <div
            class="mdc-slider__thumb"
            role="slider"
            tabindex="0"
            aria-label="Continuous slider demo"
            aria-valuemin="0"
            aria-valuemax="100"
            aria-valuenow="50"
          >
            <div class="mdc-slider__thumb-knob"></div>
          </div>
        </div>
        <script type="text/javascript">
          const MDCSlider = mdc.slider.MDCSlider;
          const element = document.querySelector(".mdc-slider");
          const slider = new MDCSlider(element);
        </script>
      </body>
    </html>

    To see that is the resources in Js Fiddle:

    enter image description here