如何在JavaScript中使用MDCSlider？

我已经为MDC滑块（）创建了一个DOM元素

它看起来不错（除了颜色）。它可以工作，但我真的不知道如何初始化它

我从CDN导入MDC。我无法从文档中理解如何进行初始化。这是一个有效的版本：

setTimeout（（）=>{slider=new mdc.slider.MDCSlider（eltSlider）}）；

如果不使用

setTimeout

，则无法工作

我试着用承诺来代替，等一下。这是行不通的

甚至更糟糕的是：如果我承诺在setTimeout之后等待，那么它就不再起作用了

发生了什么事，我该怎么做

我不使用ts，也不使用任何包处理程序。只是简单的JavaScript。（如果文档先介绍这个用例，我会很高兴。）

（这里似乎只有一个关于MDCSlider的问题。它不包括我的问题：）

---

编辑：“从CDN导入”是指此处提到的设置：

没有JavaScript错误。只是屏幕上的滑块不起作用。（看起来不错，但不起作用。）

---

我认为这是MDC和DOM状态的问题。上面链接中的示例表明DOM已经准备好了，但它没有这样说。并且它没有解释在使用JavaScript操作DOM时如何检查这一点。

这里是一些关于在纯JavaScript中使用MDCWeb的文档，“全局/CDN”部分

确保加载HTML后调用JavaScript。通常我会在结束

正文

标记之前插入它

下面是JavaScript的滑块初始化代码示例：

const MDCSlider=mdc.slider.MDCSlider；
常量滑块=新的MDCSlider（document.querySelector（'.mdc slider'）；

---

这里是MDCSlider的一个最小工作示例-

unpkg上的

最新版本似乎最近从
8.0.0
更改为
9.0.0


sldr=new mdc.slider.MDCSlider（document.querySelector（'.mdc slider'）；
sldr.root.addEventListener（'MDCSlider:change'，（e）=>console.log（e））；

现在可以正常工作了
您必须等待依赖项加载。@canbax谢谢。我该怎么做？我怎么知道？你说，“我从CDN导入MDC”。我不知道你是怎么进口的。但是您应该等到您的依赖项加载完毕。@canbax我对问题进行了编辑以使其更清楚。谢谢你的建议，但这不是那种问题。最好是一个最小的可复制样品。谢谢，但这是我已经做过的。“它并没有像我预期的那样起作用。@利奥，你能详细说明什么是不符合预期的吗？请看问题。”。我已经提到了
setTimeout
和
Promise
。
<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>