JQuery Object [object Object] has no method 'slider' when trying to use the slider demo
===

So im trying to use the slider demo (http://jqueryui.com/demos/slider/#range) and i copy the code as so: 

   

     <html>
        <head>
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
        <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/themes/base/jquery-ui.css" type="text/css" media="all" />
        <meta charset="utf-8">	
        	<style>
        	#demo-frame > div.demo { padding: 10px !important; };
        	</style>
        	<script type="text/javascript">
        	$(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>
    
    
    <div class="demo">
    
    <p>
    	<label for="amount">Price range:</label>
    	<input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;" />
    </p>
    
    <div id="slider-range"></div>
    
    </div><!-- End demo -->
    
    
    
    <div class="demo-description">
    <p>Set the <code>range</code> option to true to capture a range of values with two drag handles.  The space between the handles is filled with a different background color to indicate those values are selected.</p>
    </div><!-- End demo-description -->
    
    
    </body>
    </html>

But the slider doesnt appear, and Chrome gives me this error: Object [object Object] has no method 'slider' 

Any ideas? I searched around but the fixes didnt seem to apply to me