jQuery failed on calling "Slider" function

Question

I want to create a slider in a html file with this bootstrap api, but it keeps showing `jquery-3.1.1.slim.min.js:2 jQuery.Deferred exception: $(...).Slider is not a function TypeError:

 $(...).Slider is not a function
    at HTMLDocument.<anonymous> (file:///Users/apple/Desktop/pjt/index.html:35:18)
    at j (https://code.jquery.com/jquery-3.1.1.slim.min.js:2:30164)
    at k (https://code.jquery.com/jquery-3.1.1.slim.min.js:2:30478) undefined
r.Deferred.exceptionHook @ jquery-3.1.1.slim.min.js:2
k @ jquery-3.1.1.slim.min.js:2
jquery-3.1.1.slim.min.js:2 Uncaught TypeError: $(...).Slider is not a function
    at HTMLDocument.<anonymous> (index.html:35)
    at j (jquery-3.1.1.slim.min.js:2)
    at k (jquery-3.1.1.slim.min.js:2)`

I downloaded both js and css files from here.

this is my code:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
    <link rel="stylesheet" href="assets/css/bootstrap-slider.css">
    <link rel="stylesheet" href="assets/css/style.css">

  </head>

  <body>
      <header class="nav-header">
    </header>
    <div class="container">
      <div class="row">
        <div class="left_section">
          <input id="ex6" type="text" data-slider-min="-5" data-slider-max="20" data-slider-step="1" data-slider-value="3"/>
<span id="ex6CurrentSliderValLabel">Current Slider Value: <span id="ex6SliderVal">3</span></span>
        </div>
        <div class="middle_section">
        </div>
        <div class="right_section">
        </div>
      </div>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
    <script src="assets/js/bootstrap-slider.js"></script>
   <script>
   $(document).ready(function() {
       $("#ex6").Slider(); // I also tried .slider()
       $("#ex6").on("slide", function(slideEvt) {
           $("#ex6SliderVal").text(slideEvt.value);
       });

   })

   </script>
      </body>


</html>

I also tried to use CDN to replace the local js and css but nothing changes

`slider` not `Slider` – Mohamed-Yousef Jun 18 '17 at 23:11 — Mohamed-Yousef, Jun 18 '17 at 23:11
I tried both but the issue still exists – Deidara Jun 18 '17 at 23:16 — Deidara, Jun 18 '17 at 23:16
I posted an naswer .. Please read it carefully with note – Mohamed-Yousef Jun 19 '17 at 00:00 — Mohamed-Yousef, Jun 19 '17 at 00:00

Mohamed-Yousef · Accepted Answer · 2017-06-19T00:04:06.403

Like a slider documentation -- You have 2 ways to use it

var mySlider = new Slider('#ex6');

OR

$('#ex6').slider();

Working example using .slider

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.8.0/css/bootstrap-slider.css">
    <link rel="stylesheet" href="assets/css/style.css">

  </head>

  <body>
      <header class="nav-header">
    </header>
    <div class="container">
      <div class="row">
        <div class="left_section">
          <input id="ex6" type="text" data-slider-min="-5" data-slider-max="20" data-slider-step="1" data-slider-value="3"/>
<span id="ex6CurrentSliderValLabel">Current Slider Value: <span id="ex6SliderVal">3</span></span>
        </div>
        <div class="middle_section">
        </div>
        <div class="right_section">
        </div>
      </div>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.8.0/bootstrap-slider.js"></script>
   <script>
   $(document).ready(function() {
       $('#ex6').slider();
       $("#ex6").on("slide", function(slideEvt) {
           $("#ex6SliderVal").text(slideEvt.value);
       });

   })

   </script>
      </body>


</html>

working example using var myslider = new Slider('#ex6')

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.8.0/css/bootstrap-slider.css">
    <link rel="stylesheet" href="assets/css/style.css">

  </head>

  <body>
      <header class="nav-header">
    </header>
    <div class="container">
      <div class="row">
        <div class="left_section">
          <input id="ex6" type="text" data-slider-min="-5" data-slider-max="20" data-slider-step="1" data-slider-value="3"/>
<span id="ex6CurrentSliderValLabel">Current Slider Value: <span id="ex6SliderVal">3</span></span>
        </div>
        <div class="middle_section">
        </div>
        <div class="right_section">
        </div>
      </div>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.8.0/bootstrap-slider.js"></script>
   <script>
   $(document).ready(function() {
       var mySlider = new Slider('#ex6');
       $("#ex6").on("slide", function(slideEvt) {
           $("#ex6SliderVal").text(slideEvt.value);
       });

   })

   </script>
      </body>


</html>

Note: On my examples I used slider CDN so if your code not working with your css , js paths you can use CDN instead or check your paths

Hi, when I test my code in the browser like what you did, it works fine, but when I copy the same code into an application based on [electron](https://electron.atom.io), it can not recognize the slider function anymore, which is really weird. — Deidara, Jun 19 '17 at 00:38
you too, it's actually caused by the framework I'm using, I added another answer below yours, but your answer also helps — Deidara, Jun 19 '17 at 00:51

score 1 · Answer 2 · answered Jun 19 '17 at 00:47

Alright, I apologize for not writing my question clearly, so the issue is not from the html file, but from the framework that I am working on.

Since I was using electron, if you just load the html code, the application can not recognize the js files in the html unless you add the following code before and after your scripts.

<!-- Insert this line above script imports  -->
<script>if (typeof module === 'object') {window.module = module; module = undefined;}</script>

<!-- normal script imports etc  -->
<script src="scripts/jquery.min.js"></script>    
<script src="scripts/vendor.js"></script>    

<!-- Insert this line after script imports -->
<script>if (window.module) module = window.module;</script>

Here's the source of the solution on this issue

Liro Dasmaz · Answer 3 · 2017-06-18T23:23:47.753

0

Write slider instead of Slider

$("#ex6").slider();

And make sure the bootstrap-slider.js file is placed in assets/js/ folder

edited Jun 18 '17 at 23:23

answered Jun 18 '17 at 23:13

Liro Dasmaz

423
2
7

jQuery failed on calling "Slider" function

3 Answers3