JQuery UI not working in chrome

JQuery UI not working in chrome

I have executed the sample code from our site, it will work in Firefox, but not in chrome(see the attached image).

Code:

< ! doctype html>
< html lang="en">
< head>
< meta charset="utf-8" />
< title>jQuery UI Slider - Range slider</title>
< link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
< script src="http://code.jquery.com/jquery-1.9.1.js"></script>
< script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
< style>
    body {
font-family: "Trebuchet MS", "Helvetica", "Arial",  "Verdana", "sans-serif";
font-size: 62.5%;
    }
</ style>
< 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 ) );
});

 $ (function () {
$( "#datepicker" ).datepicker({ minDate: -20, maxDate: "+1M +10D" });
});
</ script>
</ head>
< body>
<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>
< p>Date: <input type="text" id=" datepicker" /></p>
</ body>
</ html>