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

関連記事

  1. CSS3 Menu Slider
  2. fineScroll bar

    JavaScript

    簡単に使えるスクロールバー実装「fineScroll bar」

    fineScroll barは簡単に使えるスクロールバーを実装できるj…

  3. no-image

    JavaScript

    レスポンシブ対応の軽量・コンパクトでシンプルなモーダルボックス「Modelo」

    Modeloは軽量・コンパクトなモーダルボックスを実装できるjQuer…

  4. Toast

    JavaScript

    アニメーション付きでスタッキングしていくメッセージ通知「Toast」

    Toastはアニメーション付きのメッセージ通知を表示することができるj…

  5. no-image
  6. no-image

    JavaScript

    シンプルなバナースライドショーを実装できる「jsslider」

    jssliderはシンプルなバナースライドショーを実装できるjQuer…

最近の記事

  1. Soundcore Liberty Neo(第2世代)
  2. EH-NA0B
  3. KPS-88
  4. Happy Plugs AIR1
  5. cheero Stream 10000mAh

アーカイブ

PAGE TOP