小粋空間  -  a cheap joke and a play on words site

Slider の利用方法

Ajax ライブラリとしてスライダーの API が色々と公開されていますが、それとは関係なく、1年近く前にみつけてエントリーしていなかったWebFX：Slider を紹介したいと思います。

Slider は Mozzila 系ブラウザで動作しなかった、同サイトで公開されていた slidebar を新しく作り直したものです。
なお、WebFX は、国内ではグラフ描画の Chart Usage がブログ等で紹介されています。

１．機能

Slider は下記の機能があります。

• スライダーを操作することにより、予め設定した最小値?最大値の値を取得
• 予め設定したデフォルト値の位置にスライダーハンドルを固定
• 値の途中変更が可能
• スライド方向（縦・横）を指定可能

また

• マウスサポート（ドラッグだけでなくクリックによる操作も可能）
• キーボード操作のサポート（矢印キーやPageUp/PageDown による操作が可能）
• ホイール操作のサポート（IEのみ）
• CSSによるスキン変更（Demoのページでサンプルを見ることができます）

と、スライダーとしては結構良い仕上がりです。

２．ダウンロード・インストール

Slider の一番下にある「Download」をクリック。ダウンロードしたアーカイブを解凍し、中にある slider というフォルダを index.html のディレクトリに丸ごとアップロードします。
動作に必要なのは下記です。

slider/css/bluecurve/*
slider/css/luna/*
slider/css/swing/*
slider/js/range.js
slider/js/slider.js
slider/js/timer.js

css ディレクトリは使用するスキン別に分けられています。例えば bluecurve を使用するのであれば luna / swing ディレクトリはアップロード不要です。

３．スライダーの表示

</head> の直前に下記を追加します。

<link type="text/css" rel="stylesheet" href="slider/css/bluecurve/bluecurve.css" />
<script type="text/javascript" src="slider/js/range.js"></script>
<script type="text/javascript" src="slider/js/timer.js"></script>
<script type="text/javascript" src="slider/js/slider.js"></script>

1行目はサンプルで用意されているスキンから「bluecurve」を利用した場合です。他に「winclassic」「luna」「swing」がありますのでお好きなデザインを選んでください（winclassic は winclassic.css ファイルのみ）。

スライダーを表示させたい位置に下記のタグを追加します。tabIndex 属性は TAB キーによる選択を可能にします。

<div class="slider" id="slider-1" tabIndex="1">
<input class="slider-input" id="slider-input-1" name="slider-input-1" />
</div>

上記タグのすぐ下に、下記のデバグ用タグ（青色）を表示させておくと良いでしょう（不要になったら削除します）。

<div class="slider" id="slider-1" tabIndex="1">
<input class="slider-input" id="slider-input-1" name="slider-input-1" />
</div>
<p>
Value: <input id="h-value" onchange="s.setValue(parseInt(this.value))"/>
Minimum: <input id="h-min" onchange="s.setMinimum(parseInt(this.value))"/>
Maximum: <input id="h-max" onchange="s.setMaximum(parseInt(this.value))"/>
</p>

４．script タグの追加

４．１ Horizontal （水平方向にスライド）の場合

２項で設定した位置より後方に下記の script タグを追加します。ここでは上記のデバグ用 input タグにスライダーの値を表示するだけのサンプルを示します。

<script type="text/javascript">
var s = new Slider(document.getElementById("slider-1"), document.getElementById("slider-input-1"));
s.onchange = function () {
 
    // デバグ用
    document.getElementById("h-value").value = s.getValue();
    document.getElementById("h-min").value = s.getMinimum();
    document.getElementById("h-max").value = s.getMaximum();
};
window.onresize = function () {
    s.recalculate();
};
</script>

４．２ vertical （垂直方向にスライド）の場合

４．１項のコンストラクタ（new ?の行）の第3パラメータに下記を追加します。

<script type="text/javascript">
var s = new Slider(document.getElementById("slider-1"), document.getElementById("slider-input-1"), "vertical");
　　　　：

または次のように setOrientation を追加します。

<script type="text/javascript">
var s = new Slider(document.getElementById("slider-1"), document.getElementById("slider-input-1"));
s.setOrientation("vertical");
　　　　：

５．各値の変更

下記の API を利用して値を変更します。

• デフォルト値：setValue
• 最大値：setMaximum
• 最小値：setMinimum

以下、設定例です。

<script type="text/javascript">
var s = new Slider(document.getElementById("slider-1"), document.getElementById("slider-input-1"));
s.setValue(10);
s.setMaximum(100);
s.setMinimum(0);
　　　　：

６．API

Slider で提供されている各 API です（間違っていたらご指摘ください）。

Timer

setTimeout のオブジェクト指向カプセル化

getPauseTime：ポーズ時間（ms）取得

isStarted：タイマー開始可否を返却

setPauseTime：ポーズ時間（ms）設定

start：タイマー開始

stop：タイマー終了

Range

スライダー・スクロールバー・プログレスバーの動作で使用されるデータのモデル化。 Sun Java によって定義された javax.swing.BoundedRangeModel インタフェースの考えに基づいています

getMaximum：最大値を取得

getMinimum：最小値を取得

getValue：スライダーの値を取得

setMaximum：最大値を設定

setMinimum：最小値を設定

setValue：スライダーの値を設定

Slider

最大値?最小値の値を変えるためにハンドルをドラッグずるスライダーコントロール

getBlockIncrement：PageUp/PageDownキーの増減値を取得

getMaximum：最大値を取得

getMinimum：最小値を取得

getOrientation：スライダーの縦・横を取得

getUnitIncrement：矢印キーの増減値を取得

getValue：スライダーの値を取得

ontimer：タイマー設定

recalculate：*スライダーがリサイズされた後にこのAPIを使用

setBlockIncrement：PageUp/PageDownキーの増減値を設定

setMaximum：最大値を設定

setMinimum：最小値を設定

setOrientation：スライダーの縦・横を設定

setUnitIncrement：矢印キーの増減値を指定

setValue：スライダーの値を設定

７．スキン用 CSS

スキンは下記のセレクタで設定されています。

/* スライダー全体 */
.dynamic-slider-control {}
 
/* スライダー外側(horzontal用) */
.horizontal {}
 
/* スライダー外側(vertical用) */
.vertical {}
 
/* スライダー内側 */
.dynamic-slider-control input {}
 
/* ハンドル */
.dynamic-slider-control .handle {}
 
/* ハンドルの画像(horizontal用) */
.dynamic-slider-control.horizontal .handle {}
.dynamic-slider-control.horizontal .handle div {}
.dynamic-slider-control.horizontal .handle.hover {}
 
/* ハンドルの画像(vertical用) */
.dynamic-slider-control.vertical .handle {}
.dynamic-slider-control.vertical .handle.hover {}
 
/* スライダーバー */
.dynamic-slider-control .line {}
 
/* スライダーバー幅(vertical用) */
.dynamic-slider-control.vertical .line {}
 
/* スライダーバー幅(horizontal用) */
.dynamic-slider-control.horizontal .line {}
 
/* スライダーバーのドロップシャドウ */
.dynamic-slider-control .line div {}

2008.04.21
サンプルのマークアップを変更（IE6で表示できなかったため）