CODEWITHSUNDEEP
javascriptjquery
Fka
Fka

Reputation: 6234

Uncaught RangeError: noUiSlider

I'm trying to add few sliders on website and I got stucked. I've downloaded nouislider script directly from their website and before that, I added jQuery 1.8.0 to my website. This is what I produced:

index.html

<head>
   ...
   <link rel="stylesheet" href="Content/noUiSlider/jquery.nouislider.css" type="text/css">
   <script src="Scripts/jquery-1.8.0.min.js"></script>
   <script src="Scripts/jquery.nouislider.js"></script>
   <script src="Scripts/website.js"></script>
   ...
</head>
<body>
   ...
   <div id="sslider" class="noUi-target noUi-ltr noUi-horizontal noUi-background"></div>
   ...
</body>

website.js

(function () {
   $("#sslider").noUiSlider({
       start: 5,
       range: {
           'min': 1,
           'max': 80
       }
   });
})();

When I debug in Chrome, I' catching exactly this: Exception

Can you help me?

Upvotes: 1

Views: 4138

Answers (3)

Fka
Fka

Reputation: 6234

Ok, problem solved. I have downloaded jquery.nouislider.js from NuGet (from VisualStudio 2013) and they provided me older or broken file. I thought the file was from website, but I browsed NuGet and noticed, that I have already downloaded from there.

There is no problem with code but with file. Lesson: before asking question, compare official files with those you already have installed.

Upvotes: 1

Douglas
Douglas

Reputation: 37761

I copied your example into a test file, and it works fine. I also can't see how the error message in your example could be generated by the current version of noUiSlider, so I'd suggest using the latest version of noUiSlider and the latest version of jQuery.

It would also be a good idea to only run this JS after the page has loaded, like this:

$(function() {
    $("#sslider").noUiSlider({
        start: 5,
        range: {
            'min': 1,
            'max': 80
        }
    });
});

Upvotes: 1

Felix
Felix

Reputation: 38102

Try to follow the official docs:

$("#slider").noUiSlider({
    start: [5],
    connect: true,
    range: {
        'min': 1,
        'max': 80
    }
});

Upvotes: 0

Related Questions