jQueryUI：「input type=number」を擬似的に作る

サンプルはこちら。

See the Pen Eurik by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen.

数値入力欄の右の上下ボタンより一定の数値を増減させられます。

HTML5からの「input type=number」と同じなのですが、IEなど未対応のブラウザに同様の動きをさせるために使えます。

JavaScript

$(function() {
  $('#point').spinner({
    max: 150,
    min: 50,
    step: 5
  });
});

ID「#point」のフィールドに「spinner()」コンポーネントを適用しています。
オプションで最大150、最低50、1クリックでの増減を5と設定しています。

スピナーのクリックではなく直接入力してしまえば上限下限やステップに関係なく入力できますが、spinnerコンポーネント自体は入力補助のみでバリデートまでは行わないので、必要であれば別途バリデート処理が必要です。