ฉันจะใช้ MDCSlider ใน JavaScript ได้อย่างไร

Question

ฉันได้สร้างองค์ประกอบ DOM สำหรับแถบเลื่อน MDC (https://material.io/develop/web/components/sliders).

ดูดี (ยกเว้นสี) และใช้งานได้จริง แต่ฉันไม่รู้ว่าจะเริ่มต้นอย่างไร

ฉันนำเข้า MDC จาก CDN ฉันไม่เข้าใจจากเอกสารวิธีการเริ่มต้น นี่เป็นเวอร์ชันเดียวที่ใช้งานได้:

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

หากไม่มีsetTimeoutมันจะไม่ทำงาน

ฉันได้ลองใช้คำสัญญาแทนแล้วรอสักครู่ ที่ไม่ได้ผล

และอาจแย่กว่านั้น: ถ้าฉันใช้ Promise เพื่อรอหลังจาก setTimeout มันจะไม่ทำงานอีกต่อไป

เกิดอะไรขึ้นและฉันควรจะทำอย่างไร?

ฉันไม่ใช้ ts และฉันไม่ได้ใช้ตัวจัดการแพ็คเกจใด ๆ 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 ใน 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/