jQuery UI - スライダー

スライダーはある範囲の値を設定する場合などに使われます。

例えば、 音楽のボリュームなど 0 から 100 までの値をとる時に、スライダーウィジェットで値を設定できるようにしておけば、 ツマミをドラッグすることで値を変更できるようになります。

スライダーの基本

jQuery UI を用いるとスライダーを実装するのは簡単です。

ID を割り当てた div 要素に対して、slider を呼び出します。

$('#sliderdemo1').slider();

これだけで、上のスライダーは実装できます。

変更イベントの取得

スライダーの値を変更したらその変更時に直ちに何かの処理を行う場合は、次のようにして変更イベントを処理します。

$('#sliderdemo2').slider({
  min: 0,
  max: 50,
  change: function(event, ui){
    $('#label1').html( ui.value );
  }
});

change イベントは上のように関数オブジェクトとともに設定します。また、ここでは値の上限と下限を min、max オプションで渡しています。