Accessing static resource from ZIP file in Aura component

Question

I Uploaded a JQ_UI.zip file. Structure shown below:

JQ_UI.zip
   - jquery-ui.min.js
   -jquery.ui.js
   -jquery-ui.min.css

Aura component:

    <ltng:require 
    scripts="{!join(',',
    $Resource.JQ_UI+ '/JQ_UI/jquery-ui.min.js',
    $Resource.JQ_UI+ '/JQ_UI/jquery-ui.js')}"
    styles="{! $Resource.JQ_UI + '/JQ_UI/jquery-ui.min.css'}" 
                  afterScriptsLoaded="{!c.loadJquery}" />

<p>
    <label for="amount" class="text" >Date range:</label>
    <input type="text" id="amount" style="border: 0; color: #f6931f; font-weight: bold;" size="100"/>
    </p>

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

Controller:

({
    loadJquery : function(component, event, helper) {
        jQuery("document").ready(function(){
            $(function() {
                $( "#slider-range" ).slider({
                range: true,
                min: new Date('2010.01.01').getTime() / 1000,
                max: new Date('2014.01.01').getTime() / 1000,
                step: 86400,
                values: [ new Date('2013.01.01').getTime() / 1000, new Date('2013.02.01').getTime() / 1000 ],
                slide: function( event, ui ) {
                    $( "#amount" ).val( (new Date(ui.values[ 0 ] *1000).toDateString() ) + " - " + (new Date(ui.values[ 1 ] *1000)).toDateString() );
                }
                });
                $( "#amount" ).val( (new Date($( "#slider-range" ).slider( "values", 0 )*1000).toDateString()) +
                " - " + (new Date($( "#slider-range" ).slider( "values", 1 )*1000)).toDateString());
            });
        });
  
        }

})

I actually want to make a date range slider using a jquery.ui plugin. But, it's not working out I don't know what is wrong with the code above. Can anyone help ?

Thanks