jquery ui slider pips - struggling with script dependencies

I know this is a basic question, but I am just not able to get these to work. I am pretty sure its got something to do with the dependencies and the order that I am including them, any help would be much appreciated.

$(".slider").slider().slider("pips");

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <script src="bower_components/jquery/dist/jquery.js"></script>
    <script src="bower_components/jquery-ui/jquery-ui.min.js"></script>
    <script src="bower_components/jQuery-ui-Slider-Pips/dist/jquery-ui-slider-pips.js"></script>
    <link rel="stylesheet" href="bower_components/jquery-ui/themes/base/jquery-ui.min.css" />
    <link rel="stylesheet" href="bower_components/jQuery-ui-Slider-Pips/dist/jquery-ui-slider-pips.min.css" />
    <script src="main.js"></script>
  </head>
<body>
    <div class="slider"></div>
</body>
</html>

Solution

You must ensure that all the libraries load properly. If it is not loading, jQuery UI will throw an error about "pips" not being an option. For example, you can use this:

$(function() {
  $(".slider").slider().slider("pips");
});

<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jQuery-ui-Slider-Pips/1.11.4/jquery-ui-slider-pips.css" />
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-ui-Slider-Pips/1.11.4/jquery-ui-slider-pips.js"></script>

<div class="slider"></div>

This script is working as intended as all elements are loading properly. Hope that helps.