如何在 JavaScript 中使用 MDCSlider？

Question

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

看起来不错（颜色除外）。它有效，但我真的不知道如何初始化它。

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

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

没有 setTimeout 它不起作用。

我试过使用 Promise，请稍等。那是行不通的。

也许更糟：如果我使用 Promise 在 setTimeout 之后等待，它就不再起作用了。

这是怎么回事，我应该怎么做？

我不使用 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 状态的问题。上面 link 中的例子表明 DOM 已经准备好了，但它并没有这么说。并且它没有解释在使用 JavaScript.

操作 DOM 时如何检查这一点

Answer 1

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

确保在滑块 HTML 加载后调用 JavaScript。通常我会在结束 body 标签之前插入它。
下面是 JavaScript 的滑块初始化代码示例：

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

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

Answer 2

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

如何在 JavaScript 中使用 MDCSlider？

How do I use MDCSlider in JavaScript?

javascript

web

material-components

material-components-web