2

I have created an DOM element for an MDC slider (https://material.io/develop/web/components/sliders).

It looks nice (except for the colors). And it works, but I really have no idea how to initialize it.

I import MDC from the CDN. I can't understand from the documentation how to do the initialization. This is one version that works:

setTimeout(() => { slider = new mdc.slider.MDCSlider(eltSlider) });

Without setTimeout it does not work.

I have tried using a Promise instead and wait a second. That does not work.

And maybe even worse: If I use a Promise to wait after the setTimeout it does not work any more.

What is going on and how am I supposed to do it?

I do not use ts. And I do not use any package handler. Just plain JavaScript. (And I would be glad if the documentation covered this use case first.)

(There seems to be only one other question about MDCSlider here. It does not cover my question: actual use of foundation and adapter class of mdc-components)

EDIT: By "import from CDN" I mean the setup mentioned here: https://material.io/develop/web/docs/getting-started

<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>

There is no JavaScript error. It is just the slider on the screen that does not work. (It looks ok, but it does not work.)

I think this is a problem with MDC and the DOM state. The example in the link above suggests that the DOM is ready, but it does not say so. And it does not explain how to check this when manipulating the DOM with JavaScript.

Leo
  • 4,136
  • 6
  • 48
  • 72
  • 1
    you have to wait until the dependency is loaded. – canbax Nov 18 '20 at 12:17
  • @canbax Thanks. How do I do that? And how do I know that? – Leo Nov 18 '20 at 12:18
  • 1
    You said, "I import MDC from the CDN". I don't know how you imported it. But you should wait until your dependencies are loaded. – canbax Nov 18 '20 at 13:08
  • @canbax I edited the question to make it more clear. Thanks for the suggestion, but it is not that kind of problem. – Leo Nov 18 '20 at 16:13
  • best would be a minimal reproducible sample. You can try to call it inside a thing like `document.addEventListener("DOMContentLoaded", (event) => { slider = new mdc.slider.MDCSlider(eltSlider) });` – canbax Nov 18 '20 at 18:37
  • @canbax No, an example would not help at all. I am of course able to get this to work. But without documentation that shows how to do it it may break. – Leo Nov 19 '20 at 16:48
  • 1
    The best would be a minimal reproducible sample. – canbax Nov 20 '20 at 05:22

2 Answers2

2

it seems the latest version on unpkg was recently changed from 8.0.0 to 9.0.0 fixing this issue

<script src="https://unpkg.com/material-components-web@9.0.0/dist/material-components-web.js"></script>
<link href="https://unpkg.com/material-components-web@9.0.0/dist/material-components-web.css" rel="stylesheet">

<div class="mdc-slider">
  <input class="mdc-slider__input" type="range" min="0" max="100" value="50" name="volume" aria-label="Continuous slider demo">
  <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">
    <div class="mdc-slider__thumb-knob"></div>
  </div>
</div>

<script>
        sldr = new mdc.slider.MDCSlider(document.querySelector('.mdc-slider'));
        sldr.root.addEventListener('MDCSlider:change', (e)=>console.log(e));
</script>

now works as expected https://stackblitz.com/edit/js-4ycwx5?file=index.html

user1859022
  • 2,585
  • 1
  • 21
  • 33
1

Here is some documentation about using MDC Web in plain JavaScript - https://material.io/develop/web/docs/importing-js, section "Global / CDN".

  1. Make sure you call JavaScript after slider HTML is loaded. Usually I insert it just before the closing body tag.
  2. Here is an example of slider initialization code for JavaScript:
const MDCSlider = mdc.slider.MDCSlider;
const slider = new MDCSlider(document.querySelector('.mdc-slider'));

Here is a minimum working example of the MDCSlider - https://jsfiddle.net/klyakh/oky0zf7e/1/

Konstantin Lyakh
  • 781
  • 6
  • 15