A custom user input extracted from our inhouse framework/cms. The input is somewhat similar to a native number-input, but it allows for default styling and custom styling overrides for specified numbers.

Brought to you by 10KB.

You can find some demos on the homepage.

• styled number input
• min/max values
• custom increment/decrement icons
• override view value as function or expression (eg to represent 0 by an x-icon)
• all overrides on a per value basis (eg display 0 in red)

For a complete documentation check the homepage.

Directive usage: <tien-step-input ng-model="foo" step-input-options="options"></tien-step-input>

Options:

options = {
  decrease: 'fa fa-minus',        // font-awesome icon class
  increase: 'fa fa-plus',         // font-awesome icon class
  minValue: 0,                    // min. value
  maxValue: 999,                  // max. value
  style: 'primary',               // applied css class to wrapper element
  view_value: false,              // override default view value (function or expression)
  overrides: [                    // overrides per value
    {value: 0, style: 'danger'},
    {value: 1, view_value: '{{value * 3}}'}
  ]               
};

angular-step-input is released under the MIT license.