如何在 JavaScript 中使用 MDCSlider? [英] How do I use MDCSlider in JavaScript?

问题描述

我为 MDC 滑块创建了一个 DOM 元素(https://material.io/开发/网络/组件/滑块).

看起来不错(除了颜色).它有效，但我真的不知道如何初始化它.

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

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

如果没有 setTimeout 它不起作用.

我已尝试使用 Promise 并稍等片刻.那行不通.

也许更糟糕的是:如果我使用 Promise 在 setTimeout 之后等待它不再起作用.

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

我不使用 ts.而且我不使用任何包处理程序.只是普通的 JavaScript.(如果文档首先涵盖了这个用例，我会很高兴.)

(这里似乎只有一个关于 MDCSlider 的其他问题.它不包括我的问题:mdc-components的基础和适配器类的实际使用)

---

通过从 CDN 导入"；我的意思是这里提到的设置:https://material.io/develop/web/docs/入门

<script src=https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>

没有 JavaScript 错误.只是屏幕上的滑块不起作用.(看起来没问题，但不起作用.)

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

解决方案

最近 unpkg 上的 latest 版本似乎从 8.0.0 更改为 9.0.0 修复这个问题

<link href="https://unpkg.com/material-components-web@9.0.0/dist/material-components-web.css";rel=样式表"><div class="mdc-slider"><input class="mdc-slider__input";类型=范围"min=0"最大值=100"值=50"名称=卷"aria-label =连续滑块演示"><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 class="mdc-slider__thumb"><div class="mdc-slider__thumb-knob"></div>

<脚本>sldr = 新 mdc.slider.MDCSlider(document.querySelector('.mdc-slider'));sldr.root.addEventListener('MDCSlider:change', (e)=>console.log(e));

现在按预期工作 https://stackblitz.com/edit/js-4ycwx5?file=index.html

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.

解决方案

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

这篇关于如何在 JavaScript 中使用 MDCSlider?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！