Stepper.js

JavaScript

数値を手軽にアップ・ダウンできるステッパーを実装できる「Stepper.js」

Stepper.jsは数値入力ボックスでの数値を手軽にアップ・ダウンできるステッパーを実装することができるjQueryプラグインです。プラスとマイナスのボタンが設置されていて、これをクリックすることで数値をアップしたりダウンさせたりすることが可能です。

Stepper.js

デモ

デモでは、数値を入力するボックスの右側に「+」と「-」のボタンが設置されています。ここをクリックすると、数値がアップしたりダウンしたりします。もちろん、ボックス内に直接数値を入力することも可能です。

また、タッチにも対応しているのでスマホからの操作もとてもしやすいのがいいですね。ボタンを押しながら数値を手軽に調節できるので、ユーザーにはうれしい機能といえます。

また、Stepper.jsにはオプションもいくつか用意されています。具体的には、step、min、max、debounceといった項目があります。

デモでは数値が「1」ずつ増減されますが、オプション項目の「step」の値を調節することで、他の増減幅の数値に設定することが可能です。小数点でもOKみたいですよ。

その他、「min」には最小数値を、「max」には最大数値を指定することもできます。

ちなみに、minやmax、stepといったセッティングはHTMLのinputタグ内に直接指定できるので、とても便利です。

実装方法もシンプルでわかりやすいことから、手軽に使えるのがいいですね。

というわけで、数値を手軽にアップ・ダウンできるステッパーを実装できるjQueryプラグイン「Stepper.js」のご紹介でした。

Stepper.js

Inspiration for Grid Loading Animationsグリッドアイテムをかっこよく表示するアニメーション「Inspiration for Grid Loading Animations」前のページ

スタイリッシュで多彩なドロップダウンを実装できる「SweetDropdown」次のページSweetDropdown

関連記事

  1. roll.js

    JavaScript

    スクロールによるページネーション、進捗度、ポジションなどの値を取得できる「roll.js」

    roll.jsはスクロールによるページネーション、進捗度、ポジションな…

  2. Sliiide

    JavaScript

    シンプルなスライディングメニューを実装できる「Sliiide」

    Sliiideはシンプルなスライディングメニューを実装することができる…

  3. Ace Responsive Menu
  4. Scrollgress

    JavaScript

    スクロールに連動するプログレスバーを実装できる「Scrollgress」

    Scrollgressはスクロールに連動するシンプルで軽量なプログレス…

  5. Philter

    JavaScript

    CSSのフィルターをコントロールできるjQueryプラグイン「Philter」

    PhilterはCSSのフィルターを簡単にコントロールすることができる…

  6. Page Stack Navigation

    JavaScript

    ページをスタッキングできる「Page Stack Navigation」

    Page Stack Navigationはページをスタッキングできる…

最近の記事

  1. ベルボン Mシリーズ
  2. ネック冷却ファン NRF10
  3. Kindle 8GBモデル
  4. プロテクティングクロス PC-E2
  5. インナーソフトボックス 02

アーカイブ

PAGE TOP