CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
Deidara
Deidara

Reputation: 677

jQuery failed on calling "Slider" function

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

Upvotes: 0

Views: 1430

Answers (3)

Deidara
Deidara

Reputation: 677

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

Upvotes: 1

Mohamed-Yousef
Mohamed-Yousef

Reputation: 24001

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

Upvotes: 1

Liro Dasmaz
Liro Dasmaz

Reputation: 423

Write slider instead of Slider

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

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

Upvotes: 0

Related Questions