Deep Insider の Tutor コーナー
>>  Deep Insider は本サイトからスピンオフした姉妹サイトです。よろしく! 
jQuery UI逆引きリファレンス

jQuery UI逆引きリファレンス

Sliderウィジェットでスライダーを生成するには?

2013年10月17日

ツマミをマウスでドラッグすることで値を変更できるスライダーを実装するためのSliderウィジェットの基本的な使い方について紹介。

  • このエントリーをはてなブックマークに追加

jQuery UIとは?

 jQuery UIは、jQueryを拡張するライブラリ(プラグイン)の一種で、名前のとおり、ユーザー・インターフェイス(UI)に関わる機能を提供します。jQuery UIの導入方法や使い方、jQuery UIが提供する主要なコンポーネントについては、「jQuery UI逆引きリファレンス: jQuery UIを利用するには?」を参照してください。

 Sliderウィジェットは、名前のとおり、スライダーを実装するためのウィジェットです。ツマミをマウスでドラッグすることで、値を変更できます。HTML5でも、<input type="range">要素で基本的なスライダーを作成できますが、Sliderウィジェットでは、後で述べるように、オプションを与えることで、範囲スライダーや縦置きスライダーなど、さまざまな形のスライダーを作成できます。HTML5に対応していないブラウザーを使用しているユーザーもまだまだ少なくはありませんし、当面は用途と状況に応じて両者を使い分けていく必要があるでしょう。

基本的なスライダー

 まずは、基本的なスライダーの例からです。以下に具体的なコードと実行結果を示します。

HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Accordionウィジェット</title>
<link type="text/css" rel="stylesheet"
  href="http://code.jquery.com/ui/1.10.3/themes/cupertino/jquery-ui.min.css" />
<script type="text/javascript"
  src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript"
  src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script type="text/javascript">
$(function() {
  // 2スライダーを適用
  $('#slider').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>
</head>
<body>
<input id="num" type="text" size="3" readonly />
<!--1スライダーを表示する領域-->
<div id="slider" style="width:300px;"></div>
</body>
</html>
基本的なスライダーを生成するコード(slider.html)
スライダーの値をテキストボックスに反映
スライダーの値をテキストボックスに反映

 Sliderウィジェットを利用するには、まず1のようにスライダーを表示する領域を<div>要素で準備したうえで、2のようにsliderメソッドを呼び出します。sliderメソッドに指定しているパラメーターの意味は、以下のとおりです。

オプション名概要デフォルト値
min スライダーの最小値 0
max スライダーの最大値 100
step 値の変化量 1
value 初期値 0
sliderメソッドの基本パラメーター

 ただし、スライダーだけでは正確な値は分かりませんので、現在値をテキストボックスなど別の要素に反映しておく必要があります。これを行っているのが、3のchangeイベント・ハンドラーです。changeイベントは、スライダーの値が変化したときに発生するイベントです。スライダーの現在値を取得するには、引数「ui」経由でvalueプロパティにアクセスしてください。

 4のcreateイベントは、スライダーが生成されたタイミングで発生します。changeイベントだけでは、ページが表示された直後の状態ではテキストボックスが空になってしまいますので、初期値をセットしておくのです。createイベント・ハンドラーでは「ui.value」で現在値を取得できませんので、代わりにoptionメソッドでvalueオプションを参照します。

Sliderウィジェットによるさまざまなスライダー

 sliderメソッドでは、パラメーターを変更することで範囲スライダー、縦置きスライダーを生成することもできます。

縦置きスライダー

 orientationパラメーターを「vertical」に指定します(デフォルトは「horizontal」)。

JavaScript
$(function() {
  $('#slider').slider({
    orientation: 'vertical',
    ・・・・・・中略・・・・・・
  });
});
・・・・・・中略・・・・・・
<input id="num" type="text" size="3" readonly />
<div id="slider" style="height:300px;"></div>
スライダーを縦置きにする例
縦置きスライダーの表示例
縦置きスライダーの表示例
範囲スライダー

 範囲スライダーとは、上限・下限の概念を持つスライダーのことです。rangeオプションの値(下記の表を参照)に応じて、上限・下限の両方を変化できるスライダーや、上限/下限のみを変化できるスライダーを作成できます。

range値概要結果
true 上限・下限が可変 rangeパラメーターの設定値:true
min 上限のみ可変 rangeパラメーターの設定値:min
max 下限のみ可変 rangeパラメーターの設定値:max
rangeパラメーターの設定値

 min、maxは最初の例と同じ要領で利用できますが、true(上限・下限が可変)は注意が必要なので、以下に具体的なコードを示します。

JavaScript
$(function() {
  $('#slider').slider({
    min: 0,
    max: 100,
    step: 2,
    range: true,
    // 2初期値(配列指定)
    values: [10, 70],
    // 3スライダー変更時/初期化時の処理
    change: function(e, ui) {
      $('#min').val(ui.values[0]);
      $('#max').val(ui.values[1]);
    },
    create: function(e, ui) {
      var values = $(this).slider('option', 'values')
      $('#min').val(values[0]);
      $('#max').val(values[1]);
    }
  });
});
・・・・・・中略・・・・・・
<!--1範囲スライダーの値を反映するテキストボックス-->
<input id="min" type="text" size="3" readonly />
<input id="max" type="text" size="3" readonly />
<div id="slider" style="width:300px;"></div>
範囲スライダーを実装する例
上限・下限を変更できるスライダーの例
上限・下限を変更できるスライダーの例

 範囲スライダーは値を2つ持っていますので、表示用のテキストボックスも2つ用意しておく必要があります(1)。デフォルト値も、valueパラメーターではなく、valuesパラメーター(複数形)を使って配列で指定します(2)。

 範囲スライダーの値は、changeイベント・ハンドラーではui.valuesプロパティ経由で、createイベント・ハンドラーではoptionメソッド経由でvaluesパラメーターにアクセスすることで、それぞれ取得できます(3)。いずれも戻り値は配列で、配列の「[0]」に下限値が、「[1]」に上限値が格納されています。

※以下では、本稿の前後を合わせて5回分(第12回~第16回)のみ表示しています。
 連載の全タイトルを参照するには、[この記事の連載 INDEX]を参照してください。

jQuery UI逆引きリファレンス
12. JavaScriptからダイアログ・ボックスを動的に操作するには?

Dialogウィジェットのパラメーターやメソッドを利用して、Webページ上でダイアログを動的に制御する方法について紹介。

jQuery UI逆引きリファレンス
13. Spinnerウィジェットで数値入力ボックスを生成するには?

数値入力ボックスを実装するためのSpinnerウィジェットの基本的な使い方について紹介。

jQuery UI逆引きリファレンス
14. 【現在、表示中】≫ Sliderウィジェットでスライダーを生成するには?

ツマミをマウスでドラッグすることで値を変更できるスライダーを実装するためのSliderウィジェットの基本的な使い方について紹介。

jQuery UI逆引きリファレンス
15. jQuery UIの拡張されたエフェクトを利用するには?(show/hide/toggle/effect編)

jQuery標準の各種エフェクト機能を拡張して、よりリッチな効果をシンプルなコードで実現できる、jQuery UIのエフェクト機能の基本的な使い方について紹介。

jQuery UI逆引きリファレンス
16. jQuery UIで拡張されたエフェクト機能を利用するには?(effect/xxxxxClass編)

jQuery標準の各種エフェクト機能を拡張して、よりリッチな効果をシンプルなコードで実現できる、jQuery UIのエフェクト機能の中から、effectメソッドで利用できるtransferエフェクト、スタイル・クラスを着脱するxxxxxClassメソッドついて紹介。

サイトからのお知らせ

Twitterでつぶやこう!