Làm cách nào để sử dụng MDCSlider trong JavaScript?

Question

Tôi đã tạo phần tử DOM cho thanh trượt MDC (https://material.io/develop/web/components/sliders).

Nó trông đẹp (ngoại trừ màu sắc). Và nó hoạt động, nhưng tôi thực sự không biết làm thế nào để khởi tạo nó.

Tôi nhập MDC từ CDN. Tôi không thể hiểu từ tài liệu về cách thực hiện khởi tạo. Đây là một phiên bản hoạt động:

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

Không có setTimeoutnó không hoạt động.

Thay vào đó, tôi đã thử sử dụng Lời hứa và đợi một chút. Điều đó không hoạt động.

Và thậm chí có thể tệ hơn: Nếu tôi sử dụng Promise để đợi sau setTimeout, nó không hoạt động nữa.

Chuyện gì đang xảy ra và tôi phải làm như thế nào?

Tôi không sử dụng ts. Và tôi không sử dụng bất kỳ trình xử lý gói nào. Chỉ là JavaScript đơn giản. (Và tôi sẽ rất vui nếu tài liệu đề cập đến trường hợp sử dụng này trước tiên.)

(Có vẻ như chỉ có một câu hỏi khác về MDCSlider ở đây. Nó không bao gồm câu hỏi của tôi: việc sử dụng thực tế lớp nền và bộ điều hợp của mdc-components )

---

CHỈNH SỬA: Bằng cách "nhập từ CDN", ý tôi là thiết lập được đề cập ở đây: 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>

Không có lỗi JavaScript. Nó chỉ là thanh trượt trên màn hình không hoạt động. (Có vẻ ổn, nhưng nó không hoạt động.)

Tôi nghĩ rằng đây là vấn đề với MDC và trạng thái DOM. Ví dụ trong liên kết ở trên gợi ý rằng DOM đã sẵn sàng, nhưng nó không nói như vậy. Và nó không giải thích cách kiểm tra điều này khi thao tác DOM với JavaScript.

Answer 1

Đây là một số tài liệu về cách sử dụng MDC Web trong JavaScript đơn giản - https://material.io/develop/web/docs/importing-js, phần "Toàn cầu / CDN".

1. Đảm bảo rằng bạn gọi JavaScript sau khi HTML thanh trượt được tải. Thường thì tôi chèn nó ngay trước bodythẻ đóng .
2. Đây là một ví dụ về mã khởi tạo thanh trượt cho JavaScript:

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

Đây là một ví dụ hoạt động tối thiểu của MDCSlider - https://jsfiddle.net/klyakh/oky0zf7e/1/