jQuery UI の Slider による、数値範囲をGUIで設定する縦型スライダー

jQuery UI の Slider プラグインを使った、数値の範囲をGUIで指定する縦型（垂直型）スライダー。例えば、○○円以上○○円未満の商品を検索したいときや、○○点以上○○点未満の生徒を検出したいときなどの、範囲指定GUIを簡単に作れる。

実装例（サンプル）

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

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

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

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

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

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

読み込み

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

まとめて読み込む場合

個別に読み込む場合

JavaScript

解説

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

CSS

HTML