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

Question

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

54 Views Asked by NotARobot At 09 June 2023 at 16:08

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.

Original Q&A

There are 1 best solutions below

**Paulo Fernando** · Accepted Answer · 2023-06-09T16:55:36.087000

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/[email protected]/dist/material-components-web.js

https://unpkg.com/[email protected]/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/[email protected]/dist/material-components-web.css" rel="stylesheet" />
        <script src="https://unpkg.com/[email protected]/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:

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

There are 1 best solutions below

Related Questions in JAVASCRIPT

Related Questions in MATERIAL-DESIGN

Related Questions in MATERIAL-COMPONENTS

Trending Questions

Popular # Hahtags

Popular Questions