Yahoo UI Library「スライダー処理」

いYahoo UI Libraryにはスライダー機能が用意されています。このスライダーは横方向、縦方向だけでなく四角い領域のスライダーも用意されています。領域スライダーはカラーピッカーなどに利用されています。
スライダー機能はドラッグドロップ機能を利用しているので、スライダーのライブラリファイルを読み込む前にドラッグドロップのスクリプトファイルを読み込ませる必要があります。
スライダーはスライダーの背景部分とサム（ドラッグして移動する部分）に分かれており、以下のフォーマットでHTMLタグを設定する必要があります。

横のスライダーはYAHOO.widget.Slider.getHorizSlider()で生成することができます。newを使って生成するのではない点には注意してください。YAHOO.widget.Slider.getHorizSlider()の最初のパラメータにスライダーの背景部分のIDを、2番目のパラメータにサムのIDを指定します。3番目のパラメータは最小値、4番目のパラメータが最大値になります。通常は最小値は0、最大値は任意の値に設定します。
また、スライダーの背景部分の横幅はスライダーのサムの横幅も加算したものにしておく必要があります。
実際のサンプルは以下のようになります（サンプル01を実行する）。

【サンプル01】
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Sample</title>
<link rel="stylesheet" href="main.css" type="text/css" media="all">
<script type="text/javascript" src="http://yui.yahooapis.com/2.4.1/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.4.1/build/dragdrop/dragdrop-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.4.1/build/slider/slider-min.js"></script>
<script type="text/javascript"></script>
</head>
<body>
<h1>スライダー表示 (横)</h1>
<div id="sliderbg">
<div id="sliderthumb"><img src="images/thumb.gif"></div>
</div>
</body>
</html>

横スライダーでなく縦スライダーの場合はYAHOO.widget.Slider.getVertSlider()を使います。パラメータはYAHOO.widget.Slider.getHorizSlider()と全く同じです。背景部分のスタイルシートの縦幅はサムの縦幅を加算したものにしておきます。
実際のサンプルは以下のようになります。（サンプル02を実行する）

【サンプル02】
YAHOO.util.Event.addListener(window, "load", function(){
YAHOO.widget.Slider.getVertSlider("sliderbg", "sliderthumb", 0, 300);
});

スライダー値を10刻みで移動させたい場合などがあります。この場合、YAHOO.widget.Slider.getHorizSlider()またはYAHOO.widget.Slider.getVertSlider()の5番目のパラメータに1回の移動量を指定します。
実際のサンプルは以下のようになります。（サンプル03を実行する）

【サンプル03】
YAHOO.util.Event.addListener(window, "load", function(){
YAHOO.widget.Slider.getHorizSlider("sliderbg", "sliderthumb", 0, 300, 30);
});

[目次へ]

スライダーを表示する