Yahoo UI Libraryのスライダーには横のスライダーと縦のスライダーが用意されています。スライダーを利用するには以下のライブラリを読み込まなければなりません。また、スライダーを移動させる時にアニメーションさせる場合にはanimation.jsも読み込む必要があります。
YAHOO.js
dom.js
dragdrop.js
event.js
slider.js
これらのライブラリを読み込んだら、スライダー部分を用意します。これは2つの領域（divタグを使用）を指定します。１つはスライダー全体を示すdivタグ、もう１つがスライダーのサム（動かす部分）の部分になります。サムの部分に画像を使用する場合にはimgタグを囲みます。それぞれのdivタグにはidを割り当てておきます。ここではスライダー全体のIDをsliderbg、スライダーのサム（動かす部分）のIDをsliderthumbにしてあります。（まあ、Yahooの例そのままですが・・・）
<div id="sliderbg">
<div id="sliderthumb"><img src="images/button.gif"></div>
</div>
次にスライダーのスタイルシートを設定します。スタイルシートを正しく設定しないとエラーとなりスライダーが正しく動作しません。スライダー全体を示すタグに背景画像と横幅、縦幅を指定します。スライダーのサム（動かす部分）にはposition:absolute;を指定しておきます。もちろん、これは最低限の設定なので必要に応じて、いろいろなスタイルを設定しても問題ありません。
#sliderbg {
width:108px;
height:24px;
background-image:url(images/bg.gif);
}
#sliderthumb {
position:absolute;
}
これで準備ができました。スライダーとして機能させるためには以下のようにします。
var slider;
window.onload = function () {
slider = YAHOO.widget.Slider.getHorizSlider("sliderbg", "sliderthumb", 0, 100);
}
YAHOO.widget.Slider.getHorizSlider()にスライダー全体のIDとスライダーのサムのIDを指定します。その次にある0と100はスライダーの範囲を示しています。サンプルでは100ピクセルにしてあり、0から100までの範囲で動くようになっています。これでスライダーを動かして利用することができます。（実際のサンプルを
実行する）
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>yuiスライダーサンプル（横）</title>
<link rel="stylesheet" href="slider.css" type="text/css" media="all">
<script src="YAHOO.js" type="text/javascript"></script>
<script src="dom.js" type="text/javascript"></script>
<script src="dragdrop.js" type="text/javascript"></script>
<script src="event.js" type="text/javascript"></script>
<script src="slider.js" type="text/javascript"></script>
<script type="text/javascript"><!--
// スライダー初期化
var slider;
window.onload = function () {
slider = YAHOO.widget.Slider.getHorizSlider("sliderbg", "sliderthumb", 0, 100);
}
// --></script>
</head>
<body>
<h1>yuiスライダーサンプル（横）</h1>
<p>ドラッグしてスライダーを動かすことができます</p>
<div id="sliderbg">
<div id="sliderthumb"><img src="images/button.gif"></div>
</div>
</body>
</html>
＊実際にいくつかのブラウザで試してみるとSafari 2ではスライダーのサムを正しい位置でドラッグできません(Slider ver 0.9.0)。Opera 8.5ではスライダー画像が正しく描画されずゴミが残ってしまうことがあります。
次に縦のスライダーを作成してみます。基本的に横のスライダと全く同じで呼び出すライブラリのメソッドが異なるだけです。縦のスライダーの場合はYAHOO.widget.Slider.getVertSlider()を使います。（実際のサンプルを
実行する）
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>yuiスライダーサンプル（縦）</title>
<link rel="stylesheet" href="slider.css" type="text/css" media="all">
<script src="YAHOO.js" type="text/javascript"></script>
<script src="dom.js" type="text/javascript"></script>
<script src="dragdrop.js" type="text/javascript"></script>
<script src="event.js" type="text/javascript"></script>
<script src="slider.js" type="text/javascript"></script>
<script type="text/javascript"><!--
// スライダー初期化
var slider;
window.onload = function () {
slider = YAHOO.widget.Slider.getVertSlider("sliderbg", "sliderthumb", 0, 100);
}
// --></script>
</head>
<body>
<h1>yuiスライダーサンプル（縦）</h1>
<p>ドラッグしてスライダーを動かすことができます</p>
<div id="sliderbg">
<div id="sliderthumb"><img src="images/button.gif"></div>
</div>
</body>
</html>
スライダーを動かす場合に一定の間隔にしたいことがあります。Yahooのスライダーではピクセル単位で移動間隔を指定することができます。間隔はYAHOO.widget.Slider.getHorizSlider()、YAHOO.widget.Slider.getVertSlider()の5番目のパラメータに指定します。以下のサンプルは10ピクセル単位でスライダーのサムが移動するようになります。（実際のサンプルを
実行する）
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>yuiスライダーサンプル（間隔を指定）</title>
<link rel="stylesheet" href="slider.css" type="text/css" media="all">
<script src="YAHOO.js" type="text/javascript"></script>
<script src="dom.js" type="text/javascript"></script>
<script src="dragdrop.js" type="text/javascript"></script>
<script src="event.js" type="text/javascript"></script>
<script src="slider.js" type="text/javascript"></script>
<script type="text/javascript"><!--
// スライダー初期化
var slider;
window.onload = function () {
slider = YAHOO.widget.Slider.getHorizSlider("sliderbg", "sliderthumb", 0, 100,
10);
}
// --></script>
</head>
<body>
<h1>yuiスライダーサンプル（間隔を指定）</h1>
<p>ドラッグしてスライダーを動かすことができます。10ピクセル単位でしか移動しなくなります。</p>
<div id="sliderbg">
<div id="sliderthumb"><img src="images/button.gif"></div>
</div>
</body>
</html>
[
目次へ]
(2006.3.11)