Learn how to implement nouislider in Laravel 7 after installing it using npm

Trying to integrate nouslider into my Laravel 7 project:

Here's what I've done so far:

  1. Ran npm install nouislider

  2. Added the following to resources/js/bootstrap.js :

    window.nouislider = require('nouislider');

  3. Executed the command :

    npm run dev

  4. Inserted the following code in public/js/script :

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

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

5. Added this element to my view :

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

Encountered the following error :

Uncaught ReferenceError: noUiSlider is not defined

Not sure how to proceed from here, any advice?

javascriptlaravelnpmnouislider

Answer №1

There are two common errors that can cause this issue:

Error 1

window.nouislider = require('nouislider');

To use it, make sure to do nouislider.create(... and not noUiSlider.create(...

Error 2

The use of the defer attribute can also lead to this problem (it is automatically included with Laravel authentication):

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

You can either remove the attribute or run your code when the page finishes loading using window.onload()

Please Note

Remember to add the nouislider style sheet in your app.scss file by including the following:

@import url("https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a2cccdd7cbd1cecbc6c7d0e293968c94dcd8c">[email protected]</a>/distribute/nouislider.min.css")

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Creating objects utilizing the asynchronous map method in JavaScript for data iteration

Within an async Immediately Invoked Function Expression (IIFE) in this JavaScript code, the goal is to: 1) read a JSON file, 2) extract multiple RSS feed URLs from the data, 3) fetch and parse information from those feeds, and generate an object containing ...

javascriptnode.jsjsonobjectnpm

Import JSON data entries into the agenda of a React Native calendar

I am encountering difficulties loading JSON Data into my Calendar Agenda. Unfortunately, there is limited documentation available on the process of loading JSON into Agenda items by date comparison. If anyone could provide assistance, it would be greatly a ...

javascriptjsonreactjsreact-nativereact-native-calendars

Assisting in AJAX with Rails API

My Rails website functions normally, but on certain pages I require the use of AJAX. I have successfully implemented AJAX Javascript code using jQuery without the assistance of rails helpers by manually writing corresponding paths in strings. However, I ...

javascriptjqueryruby-on-railsajaxview-helpers

Looking for a way to automatically update your JavaScript code on your Minecraft (Bukkit)

One of my clients has requested a website design that includes a player display for each server, updating every five seconds. I'm not sure where to start with this task. Below is an example for reference. Any guidance on how to achieve this would be g ...

javascriptphpajaxminecraftbukkit

Buttons for toggling D3 bubble chart display mode

As a beginner in D3.js, I am exploring the creation of a bubble chart with a toggle button to switch between different presidential campaign candidates. While I succeeded in making the chart for one candidate, I am encountering difficulties implementing th ...

javascriptjqueryhtmlcssd3.js

There seems to be an issue with Material UI Autocomplete not responding to the onChange value

I am currently developing a project using reactjs and incorporating material ui to create components. One specific component I have utilized is the Autocomplete within a form for event creation in my project. I am encountering an issue where I want the sta ...

javascriptreactjsmaterial-uionchange

Neither setState() nor forceUpdate() trigger the rendering process

I am working with a basic React setup that resembles the following structure: index.js ReactDOM.render(<App />, document.getElementById('root')); App.js export default class App extends Component { constructor(props) { super ...

javascriptreactjs

Bringing in a variable to a Vue file

I am trying to import a variable into my Vue component file using the following method: require('imports-loader?myVar=>{test:12345}!./my-com.vue'); However, I am receiving the error message [Vue warn]: Error in render function: "ReferenceErr ...

javascriptvue.jsvue-component

Generating dynamic dropdown lists with JavaScript for variable arrays

I've been scouring the internet for quite some time now, both on this platform and through Google searches, but I can't seem to find what I'm looking for. (Apologies if I missed it and this comes across as a repetitive or annoying question.) ...

javascriptarraysmenu

The loop seems to be disregarding the use of jQuery's .when() function

I've encountered a challenge with a custom loop that needs to perform a specific function before moving on to the next iteration. Below is the code snippet: function customIteration(arr, i) { if (i==arr.length) return; var message = arr[i]; ...

javascriptjqueryajaxloops.when

Using Typescript to dynamically change the array being called based on a given parameter

How can we access different arrays based on the parameters passed? public array1: Array<any> = ['list', 'of','array1']; public array2: Array<any> = ['list', 'of','array2']; public a ...

javascripttypescript

Tips for preventing redundant function calls to a prop within a ReactJS component

I am currently facing an issue where I am repeatedly calling the same function within a component to retrieve a specific prop inside the render function. Is there a way to optimize this and avoid calling the function multiple times for each required prop ...

javascriptreactjsreact-component

Attempting to access an avatar image via an API, only to encounter an error message indicating that the avatar is not defined

userData is a function that retrieves user data from an API using getUserByChainAccount. The username required by getUserByChainAccount is dynamically fetched from buyer. I'm trying to access the avatar, but I keep encountering the error message Unha ...

javascriptreactjsnext.js

I'm experiencing an issue where the code I copy from jsfiddle does not function properly when pasted into notepad++

While browsing through the code on this page javascript countdown timer pause resume, I came across the following interesting snippet: var CountDown = (function ($) { // Length ms var TimeOut = 10000; // Interval ms var TimeGap = 1000; var CurrentTime = ...

javascriptjqueryhtml

simulate the act of clicking on a download link by utilizing a secondary click

adown is a link that allows users to download a file from my webpage. It functions properly on the page. However, btndown is a button designed to simulate clicking on the adown link, but unfortunately, it does not work as expected. When the btndown button ...

javascripthtmljquery

Finding the common dates between two date arrays in Node.js

Looking for help with correctly intersecting matrices while working in nodejs? Trying to compare two arrays to find common elements, also known as an "array intersection." This seems to be a common question, and despite trying various solutions mentioned o ...

javascriptnode.jsarraystypescriptintersection

Concealing tooltip when button is clicked using jQuery

I am facing an issue where the tooltip does not hide on button click. Below is the code for the button in question: <button class="btn btn-outline-inverse ajax_addtocart additems ...

javascriptjqueryhtml

Transform your CSV data into JSON using Node.js and store it within a variable for easy access

Currently, I have this code snippet as a starting point and my task is to utilize it in order to convert the content of "world_data.csv" into JSON format. I am unsure of how to store this JSON data in a variable. I suspect that the desired data is tempora ...

javascriptjsonnode.jscsv

Is there a way to export the HTML table content to an Excel sheet that is compatible with browsers such as Internet Explorer, Mozilla Firefox, and others?

Welcome to my HTML Page! <html> <head> <title>Table </title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> </script> <script> </script> </head> <body> <table ...

javajavascriptjqueryhtmlexcel

require a global function that accesses a variable inside it

I am currently struggling with a piece of JavaScript code that is causing some difficulty for me. The code is located inside a function, and I am trying to access the soft_left and soft_top variable in other functions without much success. Below is the rel ...

javascriptjquery