jQuery UI逆引きリファレンス
Sliderウィジェットでスライダーを生成するには？
ツマミをマウスでドラッグすることで値を変更できるスライダーを実装するためのSliderウィジェットの基本的な使い方について紹介。
jQuery UIとは？
jQuery UIは、jQueryを拡張するライブラリ（プラグイン）の一種で、名前のとおり、ユーザー・インターフェイス（UI）に関わる機能を提供します。jQuery UIの導入方法や使い方、jQuery UIが提供する主要なコンポーネントについては、「jQuery UI逆引きリファレンス： jQuery UIを利用するには？」を参照してください。
Sliderウィジェットは、名前のとおり、スライダーを実装するためのウィジェットです。ツマミをマウスでドラッグすることで、値を変更できます。HTML5でも、<input type="range">要素で基本的なスライダーを作成できますが、Sliderウィジェットでは、後で述べるように、オプションを与えることで、範囲スライダーや縦置きスライダーなど、さまざまな形のスライダーを作成できます。HTML5に対応していないブラウザーを使用しているユーザーもまだまだ少なくはありませんし、当面は用途と状況に応じて両者を使い分けていく必要があるでしょう。
基本的なスライダー
まずは、基本的なスライダーの例からです。以下に具体的なコードと実行結果を示します。
|
<!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ウィジェットを利用するには、まず1のようにスライダーを表示する領域を<div>要素で準備したうえで、2のようにsliderメソッドを呼び出します。sliderメソッドに指定しているパラメーターの意味は、以下のとおりです。
| オプション名 | 概要 | デフォルト値 |
|---|---|---|
| min | スライダーの最小値 | 0 |
| max | スライダーの最大値 | 100 |
| step | 値の変化量 | 1 |
| value | 初期値 | 0 |
ただし、スライダーだけでは正確な値は分かりませんので、現在値をテキストボックスなど別の要素に反映しておく必要があります。これを行っているのが、3のchangeイベント・ハンドラーです。changeイベントは、スライダーの値が変化したときに発生するイベントです。スライダーの現在値を取得するには、引数「ui」経由でvalueプロパティにアクセスしてください。
4のcreateイベントは、スライダーが生成されたタイミングで発生します。changeイベントだけでは、ページが表示された直後の状態ではテキストボックスが空になってしまいますので、初期値をセットしておくのです。createイベント・ハンドラーでは「ui.value」で現在値を取得できませんので、代わりにoptionメソッドでvalueオプションを参照します。
Sliderウィジェットによるさまざまなスライダー
sliderメソッドでは、パラメーターを変更することで範囲スライダー、縦置きスライダーを生成することもできます。
縦置きスライダー
orientationパラメーターを「vertical」に指定します（デフォルトは「horizontal」）。
|
$(function() {
$('#slider').slider({
orientation: 'vertical',
･･････中略･･････
});
});
･･････中略･･････
<input id="num" type="text" size="3" readonly />
<div id="slider" style="height:300px;"></div>
|
範囲スライダー
範囲スライダーとは、上限・下限の概念を持つスライダーのことです。rangeオプションの値（下記の表を参照）に応じて、上限・下限の両方を変化できるスライダーや、上限／下限のみを変化できるスライダーを作成できます。
| range値 | 概要 | 結果 |
|---|---|---|
| true | 上限・下限が可変 |  |
| min | 上限のみ可変 |  |
| max | 下限のみ可変 |  |
min、maxは最初の例と同じ要領で利用できますが、true（上限・下限が可変）は注意が必要なので、以下に具体的なコードを示します。
|
$(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］を参照してください。
14. 【現在、表示中】≫ Sliderウィジェットでスライダーを生成するには？
ツマミをマウスでドラッグすることで値を変更できるスライダーを実装するためのSliderウィジェットの基本的な使い方について紹介。
15. jQuery UIの拡張されたエフェクトを利用するには？（show／hide／toggle／effect編）
jQuery標準の各種エフェクト機能を拡張して、よりリッチな効果をシンプルなコードで実現できる、jQuery UIのエフェクト機能の基本的な使い方について紹介。
16. jQuery UIで拡張されたエフェクト機能を利用するには？（effect／xxxxxClass編）
jQuery標準の各種エフェクト機能を拡張して、よりリッチな効果をシンプルなコードで実現できる、jQuery UIのエフェクト機能の中から、effectメソッドで利用できるtransferエフェクト、スタイル・クラスを着脱するxxxxxClassメソッドついて紹介。
