Как использовать MDCSlider в JavaScript?

Question

Я создал элемент DOM для слайдера MDC (https://material.io/develop/web/components/sliders).

Красиво смотрится (кроме расцветки). И это работает, но я действительно понятия не имею, как его инициализировать.

Я импортирую MDC из CDN. Я не могу понять из документации, как выполнить инициализацию. Это одна из версий, которая работает:

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

Без setTimeoutнего не работает.

Я попытался использовать вместо этого обещание и подождал секунду. Это не работает.

И, может быть, даже хуже: если я использую Promise для ожидания после setTimeout, он больше не работает.

Что происходит и как мне это делать?

Тс не использую. И я не использую никаких обработчиков пакетов. Просто простой JavaScript. (И я был бы рад, если бы документация сначала описывала этот вариант использования.)

(Кажется, здесь есть только один вопрос о MDCSlider. Он не охватывает мой вопрос: фактическое использование основы и класса адаптера для mdc-компонентов )

---

РЕДАКТИРОВАТЬ: Под «импортом из 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 готова, но не говорит об этом. И не объясняется, как это проверить при манипулировании DOM с помощью JavaScript.

Answer 1

Вот некоторая документация об использовании MDC Web в простом JavaScript - https://material.io/develop/web/docs/importing-js, раздел "Global / CDN".

1. Убедитесь, что вы вызываете JavaScript после загрузки HTML-слайдера. Обычно я вставляю его непосредственно перед закрывающим bodyтегом.
2. Вот пример кода инициализации слайдера для JavaScript:

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

Вот минимальный рабочий пример MDCSlider - https://jsfiddle.net/klyakh/oky0zf7e/1/