Solve - $(...).slider is not a function Error in jQuery

avatar

Borislav Hadzhiev

Tue Oct 19 20212 min read

Solve - $(...).slider is not a function #

The "$(...).slider is not a function" jQuery error occurs for multiple reasons:

  1. Forgetting to include the jQuery UI library.
  2. Loading the jQuery UI library before the jQuery library.
  3. Loading the jQuery library twice.
  4. Specifying an incorrect path to the jQuery files.

jquery slider is not a function error

To solve the "$(...).slider is not a function" jQuery error, make sure to load the jQuery library before loading the jQuery UI library. The libraries have to be loaded only once on the page, otherwise the error is thrown.

index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <!-- ✅ Load CSS file for jQuery ui --> <link href="https://code.jquery.com/ui/1.12.1/themes/ui-lightness/jquery-ui.css" rel="stylesheet" /> </head> <body> <div id="slider"></div> <!-- ✅ load jQuery ✅ --> <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous" ></script> <!-- ✅ load jQuery UI ✅ --> <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js" integrity="sha512-uto9mlQzrs59VwILcLiRYeLKPPbS/bT71da/OEBYEwcdNUk8jYIy+D176RYoop1Da+f9mvkYrmj5MCLZWEtQuA==" crossorigin="anonymous" referrerpolicy="no-referrer" ></script> <!-- ✅ load your JS file ✅ --> <script src="index.js"></script> </body> </html>

The order we loaded the scripts in is very important. The order is the following:

  1. Load jQuery UI CSS file.
  2. Load jQuery library.
  3. Load jQuery UI library.
  4. Run your JS file (index.js in the example).

Here's the code for the index.js file.

index.js
$(document).ready(function () { $('#slider').slider(); });

If you open your browser, you'll see the slider.

jquery slider

In our JS file, we wait for the DOM to be ready and initialize the slider.

If you forget to load the jQuery UI library or load it before the jQuery library you'd get the error.

When the jQuery library is loaded twice, the initialization process gets re-run. This causes the error and many other difficult to debug issues.

When loading the libraries from files on your local files system, make sure that the paths you specify are correct and point to the right files.

Specifying an incorrect path to the jQuery or jQuery UI scripts is equivalent to not loading the scripts at all.

You can check if the specified paths are correct by opening the console in your browser and checking if you have any 404 errors related to loading the jQuery or jQuery UI libraries.
Use the search field on my Home Page to filter through my more than 1,000 articles.