jQuery を使って動的で高品質なウェブサイトを構築する方法を解説しています。なるべく動くサンプルコードを記載しています。
jQuery 入門jQuery 入門
jQuery の使い方
jQuery の基礎
jQuery モバイル
jQuery UI
サンプルのテーマ変更

jQuery の拡張
関連サイト
サイト情報
ホーム > jQuery UI の利用 > jQuery UI - スライダー

jQuery UI - スライダー

スポンサーリンク

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

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

スライダーの基本

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

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

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

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

変更イベントの取得

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

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

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

スポンサーリンク
ホーム > jQuery UI の利用 > jQuery UI - スライダー
小山圭介 著者
小山 圭介
4/15/1973生
米国在住のソフトウェアエンジニア。ITコンサルタント.. »プロフィール
スポンサーリンク

© 2011-2013 Keisuke Oyama jQuery 入門