MDCSlider'ı JavaScript'te nasıl kullanırım?

Question

MDC kaydırıcısı için bir DOM öğesi oluşturdum (https://material.io/develop/web/components/sliders).

Güzel görünüyor (renkler hariç). Ve işe yarıyor, ama onu nasıl başlatacağım konusunda hiçbir fikrim yok.

MDC'yi CDN'den içe aktarıyorum. İlklendirmenin nasıl yapılacağını belgelerden anlayamıyorum. Bu, çalışan bir sürümdür:

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

Onsuz setTimeoutçalışmaz.

Bunun yerine bir Söz kullanmayı denedim ve bir saniye bekledim. Bu çalışmıyor.

Ve belki daha da kötüsü: setTimeout'tan sonra beklemek için bir Söz kullanırsam, artık çalışmaz.

Neler oluyor ve bunu nasıl yapacağım?

Ts kullanmıyorum. Ve herhangi bir paket işleyici kullanmıyorum. Sadece düz JavaScript. (Ve dokümantasyon önce bu kullanım senaryosunu ele alırsa çok memnun olurum.)

(Burada MDCSlider ile ilgili tek bir soru daha var gibi görünüyor. Benim sorumu kapsamıyor: mdc bileşenlerinin temel ve adaptör sınıfının gerçek kullanımı )

---

DÜZENLEME: "CDN'den içe aktar" ile burada bahsedilen kurulumu kastediyorum: 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 hatası yok. Çalışmayan sadece ekrandaki kaydırıcıdır. (İyi görünüyor ama çalışmıyor.)

Bunun MDC ve DOM durumu ile ilgili bir sorun olduğunu düşünüyorum. Yukarıdaki bağlantıdaki örnek, DOM'nin hazır olduğunu öne sürüyor, ancak bunu söylemiyor. Ve DOM'u JavaScript ile işlerken bunun nasıl kontrol edileceğini açıklamıyor.

Answer 1

MDC Web'i düz JavaScript'te kullanmakla ilgili bazı belgeler: https://material.io/develop/web/docs/importing-js, "Global / CDN" bölümü.

1. Kaydırıcı HTML yüklendikten sonra JavaScript'i çağırdığınızdan emin olun. Genellikle bunu kapanış bodyetiketinin hemen öncesine eklerim.
2. Aşağıda, JavaScript için kaydırıcı başlatma kodunun bir örneği verilmiştir:

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

İşte MDCSlider'ın minimum çalışma örneği - https://jsfiddle.net/klyakh/oky0zf7e/1/