JQuery UI の スライダーに text box と spinner を連携させる

JQuery UI の スライダーテキストボックス を連動させ、テキストボックスに spinner をつけてみます。

こんな感じです。

- 目次 -

スポンサーリンク

コード

やってることは単純で、スライダーに変化があればその値をボックスに反映、ボックスに変化があればその値をスライダーに反映しています。

関数にしてみる

複数のスライダーを設置する場合、いちいちコーディングするのも面倒なので関数にしてみます。引数は

の 6個で、左から順番に、スライダーのIDボックスのID最小値最大値増減幅初期値です。

下記サンプルでは、2組の 【スライダー+ボックス】 を設置しています。

コード

デモ

min=20, max=50, step=2, value=30 の場合
step=2 なので、動きがカクカクしています。

min=0, max=100, step=1, value=0 の場合

HTML5 type=”number” の場合

HTML5 で入力ボックスに type=”number” を指定すると、spinner が自動でついてきます。この場合は、JQuery の spinner が不要なので、若干ですが、簡単にコーディングできます。

コード

デモ

こちらの spinner を押し続けた場合、JQuery のspinner を使うケースと違って、slider はリアルタイムでは連動しません。

スポンサーリンク
その他の記事

コメントはお気軽に