как использовать nouislider после npm установки в laravel7

Question

Я не хочу импортировать nouslider в laravel7:

так, что я сделал до сих пор:

1. npm install nouislider

2. в resources / js / bootstrap. js Я добавил:

   window.nouislider = require('nouislider');

3. Запускаю команду:

   npm run dev

4. в public / js / script я добавил:

var slider = document.getElementById('slider');

noUiSlider.create(slider, {
    start: [20, 80],
    connect: true,
    range: {
        'min': 0,
        'max': 100
    }
});

5. и, на мой взгляд, у меня есть:

 <div class="col-md-12">
    <div id="slider"></div>
 </div>

Я получил эту ошибку:

Uncaught ReferenceError: noUiSlider is not defined

Я не знаю, что мне делать после этого?

Answer 1

Это может быть вызвано двумя ошибками:

Ошибка 1

window.nouislider = require('nouislider');

Затем, чтобы использовать его, вы делаете nouislider.create(..., а не noUiSlider.create(...

Ошибка 2

Атрибут defer также может вызывать это (по умолчанию он включен в Laravel auth):

<script src="{{ asset('js/app.js') }}" defer></script>

Вы можно удалить атрибут или выполнить свой код после загрузки страницы, используя window.onload()

Примечание

Также обратите внимание, что вам необходимо добавить таблицу стилей nouislider в ваш app.scss добавить:

@import url("https://cdn.jsdelivr.net/npm/nouislider@14.6.0/distribute/nouislider.min.css")