Como faço para usar MDCSlider em JavaScript?

Question

Eu criei um elemento DOM para um controle deslizante MDC (https://material.io/develop/web/components/sliders)

Parece bom (exceto pelas cores). E funciona, mas eu realmente não tenho ideia de como inicializá-lo.

Importo o MDC do CDN. Não consigo entender na documentação como fazer a inicialização. Esta é uma versão que funciona:

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

Sem setTimeoutele não funciona.

Tentei usar uma promessa e espere um segundo. Isso não funciona.

E talvez ainda pior: se eu usar uma promessa de esperar após o setTimeout ela não funcionará mais.

O que está acontecendo e como devo fazer?

Eu não uso ts. E eu não uso nenhum gerenciador de pacotes. Simplesmente JavaScript. (E eu ficaria feliz se a documentação cobrisse esse caso de uso primeiro.)

(Parece haver apenas uma outra pergunta sobre o MDCSlider aqui. Ela não cobre a minha pergunta: o uso real da fundação e da classe do adaptador dos componentes mdc )

---

EDIT: Por "importar do CDN", quero dizer a configuração mencionada aqui: 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>

Não há erro de JavaScript. É apenas o controle deslizante na tela que não funciona. (Parece ok, mas não funciona.)

Acho que este é um problema com o MDC e o estado do DOM. O exemplo no link acima sugere que o DOM está pronto, mas não diz isso. E não explica como verificar isso ao manipular o DOM com JavaScript.

Answer 1

Aqui está alguma documentação sobre como usar MDC Web em JavaScript simples - https://material.io/develop/web/docs/importing-js, seção "Global / CDN".

1. Certifique-se de chamar o JavaScript após o HTML do controle deslizante ser carregado. Normalmente, eu o insiro um pouco antes da bodytag de fechamento .
2. Aqui está um exemplo de código de inicialização do controle deslizante para JavaScript:

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

Aqui está um exemplo de funcionamento mínimo do MDCSlider - https://jsfiddle.net/klyakh/oky0zf7e/1/