jQuery UI の Slider プラグインを使った、縦型（垂直型）スライダー

jQuery UI の Slider プラグインを使った、縦型（垂直型）スライダー。orientation オプションの値に「vertical」を指定することで、縦型（垂直型）のスライダーになる。「horizontal」を指定すると、横型（水平型）のスライダーになる。実装例（サンプル）は、音量調整GUI風の縦型スライダー。

実装例（サンプル）

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

初期値、最小値、最大値に下の値を設定してある。

• 初期値： 70
• 最小値： 0
• 最大値： 100

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

• スライダーのトラック上の四角のハンドルをドラックして、トラック上を移動させることができる。
• トラック上をクリックすると、ハンドルを、その場所へ、アニメーション動作で、移動させることができる。
• ハンドルの下側をグレーに着色する。
• スライダーに合わせて、「音量」の下の数値が、「0」以上、「100」以下の範囲で、変化する。

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

読み込み

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

まとめて読み込む場合

個別に読み込む場合

JavaScript

解説

• orientation： 水平（横）型か、垂直（縦）型かを設定するオプション。「vertical」を指定すると、垂直（縦）型のスライダーになる。
• animate： トラック上のクリックした場所へ、ハンドルを、アニメーション動作で移動させるオプション。「slow」を設定すると、ゆっくりとした速度のアニメーション動作で移動する。
• range: ハンドルの位置に応じて、トラックの色を変更するオプション。「min」を設定すると、ハンドルの位置の数値より小さい方のトラックを着色する。
• value: jQuery UI の Slider プラグインの初期値を設定するオプション。
• min： jQuery UI の Slider プラグインの最小値を設定するオプション。
• max： jQuery UI の Slider プラグインの最大値を設定するオプション。

CSS

HTML