jQuery-UI スライダー

(1)スライダーを表示する領域
<div id=”slider1″ style=”width:300px;”> </div>
<script type=”text/javascript”>
　　$(function(){
　　　　//　(2)スライダーを適用
　　　　$(‘#slider1’).slider({
　　　　　　min: 0,
　　　　　　max: 100,
　　　　　　step: 2,
　　　　　　value: 50,
　　　　});
　　});
</script>

<input id=”num” type=”text” size=”3″ readonly />
(1)スライダーを表示する領域
<div id=”slider2″ style=”width:300px;”> </div>
<script type=”text/javascript”>
　　$(function(){
　　　　//　(2)スライダーを適用
　　　　$(‘#slider2’).slider({
　　　　　　min: 0,
　　　　　　max: 100,
　　　　　　step: 2,
　　　　　　value: 50,
　　　　　　// (3)スライダーの変化時にテキストボックスの値表示を更新
　　　　　　change: function(e, ui)　{
　　　　　　　　$(‘#num’).val(ui.value);
　　　　　　},
　　　　　　//(4)スライダーの初期化時に、その値をテキストボックスにも反映
　　　　　　create:　function(e, ui){
　　　　　　　　$(‘#num’).val($(this).slider(‘option’,　’value’));
　　　　　　}
　　　　});
　　});
</script>