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>

コメントを残す

メールアドレスが公開されることはありません。