Why is JQuery UI slider not appearing on my page?-CodePudding

I'm trying to get JQuery UI to work on my HTML page with no success. Specifically I want to use the range slider but cant get anything to show on the page. I've downloaded the JQuery UI folder and imported it into my code file. The code as I have it at the minute is below:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="/styles.css" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.css" />
  <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg p" crossorigin="anonymous"/>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Noto Sans:wght@400;700&display=swap" rel="stylesheet">

  <link rel="stylesheet" href="/jquery-ui-1.12.1.custom/jquery-ui.min.css">
  <script src="/jquery-ui-1.12.1.custom/external/jquery/jquery.js"></script>
  <script src="/jquery-ui-1.12.1.custom/jquery-ui.min.js"></script>
  <script>
    $( function() {
      $( "#slider-range" ).slider({
        range: true,
        min: 0,
        max: 500,
        values: [ 75, 300 ],
        slide: function( event, ui ) {
          $( "#amount" ).val( "$"   ui.values[ 0 ]   " - $"   ui.values[ 1 ] );
        }
      });
      $( "#amount" ).val( "$"   $( "#slider-range" ).slider( "values", 0 )  
        " - $"   $( "#slider-range" ).slider( "values", 1 ) );
    } );
    </script>

</head>
<body>

     <section class = "nav-bar"></section>
 <p>
    <label for="amount">Price range:</label>
    <input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;">
  </p>

  <div id="slider-range"></div> 

</section>

Would greatly appreciate anyone's help with this!!

CodePudding user response：

Customized jQuery scripts cause issues. I commented yours and added default js and missing css. (better to move scripts to footer)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="/styles.css" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.css" />
  <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg p" crossorigin="anonymous"/>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Noto Sans:wght@400;700&display=swap" rel="stylesheet">
 
<!-- my Styles start -->
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<!-- my Styles end -->

<link rel="stylesheet" href="/jquery-ui-1.12.1.custom/jquery-ui.min.css">
  
<!-- my jQuery start -->
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<!-- my jQuery end -->

<!-- my Script start -->
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<!-- my Script end -->
  
<!--   <script src="/jquery-ui-1.12.1.custom/external/jquery/jquery.js"></script> -->
<!--   <script src="/jquery-ui-1.12.1.custom/jquery-ui.min.js"></script> -->
  <script>
    $( function() {
      $( "#slider-range" ).slider({
        range: true,
        min: 0,
        max: 500,
        values: [ 75, 300 ],
        slide: function( event, ui ) {
          $( "#amount" ).val( "$"   ui.values[ 0 ]   " - $"   ui.values[ 1 ] );
        }
      });
      $( "#amount" ).val( "$"   $( "#slider-range" ).slider( "values", 0 )  
        " - $"   $( "#slider-range" ).slider( "values", 1 ) );
    } );
    </script>

</head>
<body>

     <section class = "nav-bar"></section>
 <p>
    <label for="amount">Price range:</label>
    <input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;">
  </p>

  <div id="slider-range"></div> 
</body>