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. no-image

    JavaScript

    依存関係のないタグ付け機能を実装できる「taggle.js」

    taggle.jsは依存関係のないタグ付け機能を実装できるのが特徴です…

  2. raccordion

    JavaScript

    レスポンシブにも対応!アコーディオンのイメージスライダーを実装できるjQueryプラグイン「racc…

    レスポンシブにも対応しているjQueryプラグインのアコーディオンのイ…

  3. Schedule Template

    JavaScript

    シンプルなスケジュール表を実装する「Schedule Template」

    スッキリしたデザインのシンプルなスケジュールテンプレートを実装するため…

  4. Tipso

    JavaScript

    レスポンシブでアニメーションもいい感じのツールチップのjQueryプラグイン「Tipso」

    Tipsoはレスポンシブに対応した軽量でアニメーションもいい感じのツー…

  5. EasyLoading

    JavaScript

    ローディングアニメーションを手軽に実装できる「EasyLoading」

    EasyLoadingは、ローディングアニメーションを手軽に実装するこ…

  6. lory

    JavaScript

    タッチ対応でカルーセルにもできるミニマルなJS(jQuery)スライダー「lory」

    loryはタッチに対応したミニマルなデザインが特徴的なスライダーを実装…

最近の記事

  1. 冬用のふとん
  2. 田沢湖
  3. ゴムの耳栓
  4. ライオンコーヒー(バニラマカダミア)
PAGE TOP