横方向のスライダーを表示する

書式

sliderObj = YAHOO.widget.Slider.getHorizSlider(bgID, thumbID, left, right, tick)

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

説明

 横方向のスライダーを表示するにはYAHOO.widget.Slider.getHorizSlider()を使います。最初のパラメータにはスライダーの背景となる領域を指定します。2番目のパラメータにはスライダーのハンドル(可動部分)を指定します。3番目はスライダーの最小値、4番目はスライダーの最大値になります。5番目のパラメータは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="yahoo.js"></script>
<script type="text/javascript" src="dom.js"></script>
<script type="text/javascript" src="event.js"></script>
<script type="text/javascript" src="dragdrop.js"></script>
<script type="text/javascript" src="slider.js"></script>
<script type="text/javascript"><!--
var slider;
window.onload = function(){
slider = YAHOO.widget.Slider.getHorizSlider("sliderBG", "sliderThumb", 0, 100, 5);
}
// --></script>
</head>
<body>
<h1>スライダー(横)</h1>
<div id="sliderBG"><div id="sliderThumb"><img src="ptr.gif"></div>
</div>
</body>
</html>