script.aculo.usではスライダー値の範囲を指定することができます。スライダー値の範囲はControl.Slider()のオプションでrange:$R(最小値,最大値)を指定します。以下のサンプルは0〜200までの小数値を取るスライダーのサンプルです。（サンプルを
実行する）
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>スライダー値の範囲を指定する</title>
<link rel="stylesheet" href="main.css" type="text/css" media="all">
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="scriptaculous.js"></script>
<script type="text/javascript"><!--
window.onload = function ()
{
new Control.Slider("ptr", "back", {
range:$R(0,200), onSlide:dispValue, onChange:dispValue});
}
function dispValue(n)
{
$("result").innerHTML = n;
}
// --></script>
</head>
<body>
<h1>scriptaculous.js スライダー値の範囲を指定する</h1>
<div id="back">
<div id="ptr"></div>
</div>
<div id="result"></div>
</body>
</html>
指定できる範囲は必ずしも0から始まる必要はなく任意の数値から始める事ができます。以下のサンプルでは100〜200までの値を取るスライダーのサンプルです。（サンプルを
実行する）
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>スライダー値の範囲を指定する(2)</title>
<link rel="stylesheet" href="main.css" type="text/css" media="all">
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="scriptaculous.js"></script>
<script type="text/javascript"><!--
window.onload = function ()
{
new Control.Slider("ptr", "back", {
range:$R(100,200), onSlide:dispValue, onChange:dispValue});
}
function dispValue(n)
{
$("result").innerHTML = n;
}
// --></script>
</head>
<body>
<h1>scriptaculous.js スライダー値の範囲を指定する(2)</h1>
<div id="back">
<div id="ptr"></div>
</div>
<div id="result"></div>
</body>
</html>
スライダー値は整数ではなく小数値になります。スライダー値を小数値でなく整数値で得たい場合にはMath.floor()を使って小数点以下を切り捨てればよいでしょう。（サンプルを
実行する）
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>スライダー値の範囲を指定する (整数値)</title>
<link rel="stylesheet" href="main.css" type="text/css" media="all">
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="scriptaculous.js"></script>
<script type="text/javascript"><!--
window.onload = function ()
{
new Control.Slider("ptr", "back", { range:$R(100,200), onSlide:dispValue, onChange:dispValue});
}
function dispValue(n)
{
$("result").innerHTML =
Math.floor(n);
}
// --></script>
</head>
<body>
<h1>scriptaculous.js スライダー値の範囲を指定する (整数値)</h1>
<div id="back">
<div id="ptr"></div>
</div>
<div id="result"></div>
</body>
</html>
[
目次へ]
(2006.7.4)