如何在 JavaScript 中使用 MDCSlider？

Question

我为 MDC 滑块 (https://material.io/develop/web/components/sliders) 创建了一个 DOM 元素。

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

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

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

没有setTimeout，它不起作用。

我已经尝试使用 Promise 来代替，请稍等。那是行不通的。

甚至可能更糟：如果我在 setTimeout 之后使用 Promise 等待它不再起作用。

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

我不使用 ts。而且我不使用任何包处理程序。只是普通的 JavaScript。 （如果文档首先介绍了这个用例，我会很高兴。）

（这里似乎只有一个关于 MDCSlider 的问题。它不包括我的问题：actual use of foundation and adapter class of mdc-components）

---

编辑：“从 CDN 导入”是指此处提到的设置：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>

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

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

Answer 1

似乎 unpkg 上的 latest 版本最近从 8.0.0 更改为 9.0.0 修复 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>

现在可以正常工作https://stackblitz.com/edit/js-4ycwx5?file=index.html

Answer 2

这里是一些关于在纯 JavaScript 中使用 MDC Web 的文档 - https://material.io/develop/web/docs/importing-js，“全球/CDN”部分。

1. 确保在加载滑块 HTML 后调用 JavaScript。通常我在结束 body 标记之前插入它。
2. 以下是 JavaScript 滑块初始化代码示例：

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

这是 MDCSlider 的最小工作示例 - https://jsfiddle.net/klyakh/oky0zf7e/1/