jQuery UI の Slider プラグインによるスライダー

jQuery UI の Slider プラグインについての記事。

Slider プラグインは、水平スライダーや垂直スライダーを簡単に作れる。

実装例（サンプル）

実装例（サンプル）について

• スライダー左端の四角のハンドルをドラックして、トラック上を移動させることができる。
• トラック上をクリックすると、ハンドルを、その場所へ、移動させることができる。

実装例（サンプル）のソースコード

読み込み

パスは、それぞれ、アップロードした場所を指定する。

まとめて読み込む場合

個別に読み込む場合

JavaScript

CSS

HTML

オプション

Slider プラグインには、オプションが多く存在する。私が良く使うのは、下のオプション。

min

最小値を設定するオプション。

max

最大値を設定するオプション。

range

ハンドルの位置に応じて、トラックの色を変更するオプション。

min

range の値に「min」を指定すると、ハンドルの位置の数値より小さい方のトラックを着色する。

max

range の値に「max」を指定すると、ハンドルの位置の数値より大きい方のトラックを着色する。

true

range の値に「true」を指定すると、ハンドルとハンドルの間のトラックを着色する。

step

移動値を設定するオプション。

value

初期値を設定するオプション。

values

範囲の初期値を設定するオプション。

animate

トラック上のクリックした場所へ、ハンドルを、アニメーション動作で移動させるオプション。

値に「slow」を設定すると、ゆっくりとした速度のアニメーション動作で移動する。

値に「fast」を設定すると、早い速度のアニメーション動作で移動する。

値に「normal」を設定すると、「slow」と「fast」の中間の速度のアニメーション動作で移動する。