矩形領域のスライダーを表示する

書式

sliderObj = YAHOO.widget.Slider.getSliderRegion(bgID, thumbID, left, right, top, bottom, tick)

sliderObj : スライダーオブジェクト
bgID : 背景部分のエレメントID
thumbID : 可動部分のエレメントID
left : 左端の値
right : 右端の値
left : 上端の値
right : 右端の値
tick : 1回の移動量【省略可能】

説明

 矩形領域のスライダーを表示するにはYAHOO.widget.Slider.getSliderRegion()を使います。最初のパラメータにはスライダーの背景となる領域を指定します。2番目のパラメータにはスライダーのハンドル(可動部分)を指定します。3〜6番目はスライダーの左端の値、右端の値、上端の値、下端の値になります。7番目のパラメータは1回の移動量を指定します。

サンプルコード [実行]

<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">
<link rel="stylesheet" href="logger.css" type="text/css" media="all">
<script type="text/javascript" src="yui/yahoo.js"></script>
<script type="text/javascript" src="yui/dom.js"></script>
<script type="text/javascript" src="yui/event.js"></script>
<script type="text/javascript" src="yui/dragdrop.js"></script>
<script type="text/javascript" src="yui/slider.js"></script>
<script type="text/javascript"><!--
var slider;
window.onload = function(){
slider = YAHOO.widget.Slider.getSliderRegion("sliderBG", "sliderThumb", 0, 255, 0, 255, 1);
}
// --></script>
</head>
<body>
<h1>スライダー(領域)</h1>
<div id="sliderBG"><div id="sliderThumb"><img src="ptr.gif"></div>
</div>
</body>
</html>