CODEWITHSUNDEEP
javascriptlaravelnpmnouislider
Saad Zizi
Saad Zizi

Reputation: 35

how to use nouislider after npm install in laravel7

I wan't to import nouslider to laravel7 :

so what I did so far :

  1. npm install nouislider

  2. in resources/js/bootstrap.js I added :

    window.nouislider = require('nouislider');

  3. I run the comand :

    npm run dev

  4. in public/js/script I added :

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

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

5.and in my view I have :

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

I got this error :

Uncaught ReferenceError: noUiSlider is not defined

I don't know what I have to do after that ?

Upvotes: 1

Views: 1414

Answers (1)

jewishmoses
jewishmoses

Reputation: 1138

This can be caused by a two errors:

Error 1

window.nouislider = require('nouislider');

Then to use it you do nouislider.create(... and not noUiSlider.create(...

Error 2

The defer attribute can also cause this (it's included by default with Laravel auth):

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

You can either remove the attribute or execute your code once the page loads using window.onload()

Note

Also note that you need to add the nouislider style sheet in your app.scss add:

@import url("https://cdn.jsdelivr.net/npm/[email protected]/distribute/nouislider.min.css")

Upvotes: 3

Related Questions