はスライダー値を取得するには2つの方法があります。1つは、スライダーのサムがドラッグしている時に値を取得する方法、もう1つが現在のスライダー値を取得する方法です。
ドラッグしている時にスライダー値を取得するにはsubscribe()を使ってイベントとイベントが発生した時に実行する関数を指定しておきます。スライダーのサムが移動するとchangeイベントが発生します。このイベントが発生したら関数が呼び出され、パラメータとしてスライダー値（オフセット）が渡されます。
実際のサンプルは以下のようになります。（
サンプル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"><!--
YAHOO.util.Event.addListener(window, "load", function(){
var sliderObj = YAHOO.widget.Slider.getHorizSlider("sliderbg", "sliderthumb", 0, 300);
sliderObj.subscribe("change", function(value){
YAHOO.util.Dom.get("result").innerHTML = value;
});
});
// --></script>
</head>
<body>
<h1>スライダー表示 (値を表示)</h1>
<div id="sliderbg">
<div id="sliderthumb"><img src="images/thumb.gif"></div>
</div>
<div id="result"></div>
</body>
</html>
ドラッグしている時ではなく、どんな時でもスライダー値を取得することができます。この場合はスライダーオブジェクトのgetValue()を使うと値を取得することができます。
実際のサンプルは以下のようになります。（サンプル02を実行する）
【サンプル02】
<!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"><!--
var sliderObj;
YAHOO.util.Event.addListener(window, "load", function(){
sliderObj = YAHOO.widget.Slider.getHorizSlider("sliderbg", "sliderthumb", 0, 300);
YAHOO.util.Event.addListener("getSV", "click", function(){
alert("スライダー値："+sliderObj.
getValue());
});
});
// --></script>
</head>
<body>
<h1>スライダー表示 (値を表示)</h1>
<div id="sliderbg">
<div id="sliderthumb"><img src="images/thumb.gif"></div>
</div>
<form>
<input type="button" value="値を取得" id="getSV">
</form>
</body>
</html>
[
目次へ]