UI slider isn't visible after page loads into container

UI slider isn't visible after page loads into container

 - The body of index.php consists of a navigation bar with links and a separate container with the  id="pageContent" .

 - In my JavaScript, when the page loads it loads another page (HomePage.php) into  #pageContent  ( $(#pageContent).load('HomePage.php'); ).

 - As for the navigation bar; it takes the name of the clicked link as a variable, adds .php to the end of it and loads that into  #pageContent : 
 
    
  
  1. $('#navContent a').on('click', function() {
    2. 
  

    3. 
  
  3.       var page = $(this).attr('href'); // Get link name 
    4. 
  
  4.        $('#pageContent').load(page + '.php'); // Load clicked page
    5. 
  
  5.        return false;
    6. 
  
  6.  
    7. 
  
  7. });
    8.
 - One of the site's pages ( var page ) has a range slider on it. My problem is the slider doesn't show when that page loads [into  #pageContent ] but it works fine when I copy and paste the HTML into index.php (manually).

When I run the page [with the slider] separately the slider shows but when I run it with the rest of my site [into #pageContent] it doesn't. Does anyone know what i'm doing wrong or why my slider isn't visible on .load()?

I want to reduce the code but I don't know to .load() an external page using CodePen