Why is my JQuery UI slider not appearing?

Why is my JQuery UI slider not appearing?

Hi there

I have been using a different slider plugin but it wasn't quite right and decided to switch to JQuery UI. However the slider does not appear at all. 

Here is my JS:

  2. $(window).load(function(){
  3.    $('#introModal').modal('show');
  4.    $("#result").html("187889"); 
  5.    $("#result2").html("193008");
  6.    $('#calculate').hide();
  7.    $('#calculate2').hide();
  8.    $("#investmentName").html("Example Grant Programme");
  9.    $("#investmentName2").html("Example Social Investment");
  10.    $('#nameyourprogramme').hide();
  11.    $('#nameyourprogramme2').hide();
  12.  });

  14. $(document).ready( function() {
  15.     $('#slider').slider();
  16. });
And here is my html:

  2. <html>
  3. <meta charset="UTF-8">
  4. <br>
  5. <title>The Endowment Calculator</title>
  6. <div class="container">
  7.     <head class="masthead">
  8.       <link href='http://fonts.googleapis.com/css?family=Dosis|News+Cycle|Josefin+Slab|Inconsolata' rel='stylesheet' type='text/css'>
  9.       <h1 class="masthead-heading">The Endowment Calculator</h1>
  10.       <h2 class="masthead-intro">for social impact</h2> 
  11.       <!-- Latest compiled and minified CSS -->
  12.       <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
  13.       <!-- Optional theme -->
  14.       <link rel="stylesheet" type="text/css" href="style.css" media="screen" />
  15.       <link rel="stylesheet" href="jquery-ui.min.css">
  16.     </head>
  17. </div>
  18. <br>
  19. <br>
  20. <br>
  21.   <body>
  22.      ....
  23.               <div class="input" id="slider">
  24.                 </div>
  25.      
  26.       .....

  28.       <script language="javascript" type="text/javascript" src="jquery-1.11.2.js"></script>
  29.       <script src="external/jquery/jquery.js"></script>
  30.       <script src="jquery-ui.min.js"></script> 
  31.       <script src="main.js"></script>
  32.       <script src="calculate.js"></script>
  33.       <script src="calculate2.js"></script>
  34.       <script src="refresh.js"></script>
  35.       <script src="refresh2.js"></script>
  36.     </div>
  37.     
  38.   </body>

  40. </html>

  42. <!-- Latest compiled and minified JavaScript for Bootstrap -->
  43. <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
I'm such a beginner and everything had been going really well until this happened. I'd be so grateful for any advice anyone can give!

Thanks and all the best

Polly