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

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

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

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

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

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

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

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

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

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

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

РЕДАКТИРОВАТЬ: Под импортом из 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.


javascript web material-components material-components-web
person Leo    schedule 18.11.2020    source источник
comment
вам нужно дождаться загрузки зависимости.   -  person canbax    schedule 18.11.2020
comment
@canbax Спасибо. Как я могу это сделать? И откуда я это знаю?   -  person Leo    schedule 18.11.2020
comment
Вы сказали, что я импортирую MDC из CDN. Я не знаю, как вы его импортировали. Но вам следует дождаться загрузки ваших зависимостей.   -  person canbax    schedule 18.11.2020
comment
@canbax Я отредактировал вопрос, чтобы сделать его более понятным. Спасибо за предложение, но это не такая проблема.   -  person Leo    schedule 18.11.2020
comment
лучше всего будет минимальный воспроизводимый образец. Вы можете попробовать вызвать его внутри чего-то вроде document.addEventListener("DOMContentLoaded", (event) => { slider = new mdc.slider.MDCSlider(eltSlider) });   -  person canbax    schedule 18.11.2020
comment
@canbax Нет, пример совсем не поможет. Я, конечно, могу заставить это работать. Но без документации, которая показывает, как это сделать, он может сломаться.   -  person Leo    schedule 19.11.2020
comment
Лучше всего будет минимальный воспроизводимый образец.   -  person canbax    schedule 20.11.2020

Ответы (2)


arrow_upward
1
arrow_downward

похоже, что версия latest в unpkg недавно была изменена с 8.0.0 на 9.0.0, исправляя это выпуск

<script src="https://unpkg.com/[email protected]/dist/material-components-web.js"></script>
<link href="https://unpkg.com/[email protected]/dist/material-components-web.css" rel="stylesheet">

<div class="mdc-slider">
  <input class="mdc-slider__input" type="range" min="0" max="100" value="50" name="volume" aria-label="Continuous slider demo">
  <div class="mdc-slider__track">
    <div class="mdc-slider__track--inactive"></div>
    <div class="mdc-slider__track--active">
      <div class="mdc-slider__track--active_fill"></div>
    </div>
  </div>
  <div class="mdc-slider__thumb">
    <div class="mdc-slider__thumb-knob"></div>
  </div>
</div>

<script>
        sldr = new mdc.slider.MDCSlider(document.querySelector('.mdc-slider'));
        sldr.root.addEventListener('MDCSlider:change', (e)=>console.log(e));
</script>

теперь работает как положено https://stackblitz.com/edit/js-4ycwx5?file=index.html

person user1859022    schedule 30.12.2020

arrow_upward
1
arrow_downward

Вот некоторая документация по использованию 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/

person Konstantin Lyakh    schedule 30.11.2020
comment
Спасибо, но это то, что я уже сделал. И это не сработало, как я ожидал. - person Leo; 30.11.2020
comment
@ Лео, можешь уточнить, что не так, как ожидалось? - person Konstantin Lyakh; 01.12.2020
comment
Пожалуйста, смотрите вопрос. Я упомянул setTimeout и Promise. - person Leo; 01.12.2020