¿Cómo uso MDCSlider en JavaScript?

Question

He creado un elemento DOM para un control deslizante MDC (https://material.io/develop/web/components/sliders).

Se ve bien (excepto por los colores). Y funciona, pero realmente no tengo idea de cómo inicializarlo.

Importo MDC desde CDN. No puedo entender por la documentación cómo hacer la inicialización. Esta es una versión que funciona:

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

Sin setTimeoutella no funciona.

En su lugar, he intentado usar una Promesa y espero un segundo. Eso no funciona.

Y tal vez incluso peor: si utilizo una Promise para esperar después de setTimeout, ya no funciona.

¿Qué está pasando y cómo se supone que debo hacerlo?

No uso ts. Y no uso ningún controlador de paquetes. Simplemente JavaScript. (Y me alegraría si la documentación cubriera este caso de uso primero).

(Parece haber solo otra pregunta sobre MDCSlider aquí. No cubre mi pregunta: uso real de la base y la clase de adaptador de componentes mdc )

---

EDITAR: Por "importar desde CDN" me refiero a la configuración mencionada aquí: 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>

No hay ningún error de JavaScript. Es solo el control deslizante en la pantalla lo que no funciona. (Se ve bien, pero no funciona).

Creo que esto es un problema con MDC y el estado DOM. El ejemplo del enlace anterior sugiere que el DOM está listo, pero no lo dice. Y no explica cómo verificar esto al manipular el DOM con JavaScript.

Answer 1

Aquí hay algo de documentación sobre el uso de MDC Web en JavaScript simple: https://material.io/develop/web/docs/importing-js, sección "Global / CDN".

1. Asegúrese de llamar a JavaScript después de que se cargue el HTML deslizante. Por lo general, lo inserto justo antes de la bodyetiqueta de cierre .
2. A continuación, se muestra un ejemplo de código de inicialización del control deslizante para JavaScript:

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

Aquí hay un ejemplo de funcionamiento mínimo del MDCSlider: https://jsfiddle.net/klyakh/oky0zf7e/1/