スライダーを使って文字の大きさを変える

jQuery JavaScript 
<html>
<head>
<link rel="stylesheet" href="css/jquery-ui-1.7.2.custom.css" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js"></script>
<script type="text/javascript">
//<![CDATA[
	$(document).ready(function() {
		$('#slider_value').text('12');
		$('#slider').slider({
			animate: true,
			max: 50,
			min: 9,
			value: 12,
			orientation: 'horizontal',
			slide: function (event, ui) {
				$('p').css('font-size', ui.value + 'px');
				$('#slider_value').text(ui.value);
			}
		});
	});
//]]>
</script>
<style type="text/css">
body {
	text-align:center;
}
#slider {
	width:300px;
	margin: 5px auto 20px auto;
}
</style>
</head>
<body>
<div id="container">
<div id="parameter">
	min[9]＜ Font Size: <span id="slider_value"> </span> ＞max[50]
</div>
<div id="slider"></div>
<p>abcdefg
</p>
</div>
</body>
</html>