jQuery slider does not work
<pre><code>   &lt;link rel="stylesheet" type="text/css" href="css/status.css" /&gt;
   &lt;script type="text/javascript" src="js/jquery-1.7.1.min.js"&gt;&lt;/script&gt;
   &lt;script type="text/javascript" src="js/jquery-ui-1.8.18.custom.min.js"&gt;&lt;/script&gt;
   &lt;meta charset="utf-8"&gt;
    &lt;style&gt;
#demo-frame &gt; div.demo { padding: 10px !important; };
    &lt;/style&gt;
&lt;script&gt;
$(function() {
    $( "#slider-range-min" ).slider({
        range: "min",
        value: 37,
        min: 20,
        max: 700,
        slide: function( event, ui ) {
            $( "#amount" ).val( "$" + ui.value );
        }
    });
    $( "#amount" ).val( "$" + $( "#slider-range-min" ).slider( "value" ) );
});
&lt;/script&gt;



   &lt;div class="demo"&gt;

   &lt;p&gt;
&lt;label for="amount"&gt;Maximum price:&lt;/label&gt;
&lt;input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;"        
     /&gt;
   &lt;/p&gt;

   &lt;div id="slider-range-min"&gt;&lt;/div&gt;

   &lt;/div&gt;&lt;!-- End demo --&gt;



   &lt;div class="demo-description"&gt;
   &lt;p&gt;Fix the minimum value of the range slider so that the user can only select a  
    maximum.  Set the &lt;code&gt;range&lt;/code&gt; option to "min."&lt;/p&gt;
   &lt;/div&gt;&lt;!-- End demo-description --&gt;
</code></pre>

<p>I am trying to use jQuery slider, <a href="http://jqueryui.com/demos/slider/#rangemin" rel="nofollow">http://jqueryui.com/demos/slider/#rangemin</a></p>

<p>I downloaded a file into my local machine.</p>

<p>The slider does not appear in the browser.</p>

<p>Any thoughts?</p>
