Stepper

A two character variant for a step control. The component can be constrained by min and max values. This component has a tab stop on the input. With focus on the stepper the up arrow, and right arrow will increment the value. The down arrow, and left arrow will decrement.

HTML

<div class="t-content" ng-controller="stepperExampleController as ctrl">
    <h1>Confirmation Stepper</h1>
    <div>Min: <span ng-bind="ctrl.min"></span></div>
    <div>Max: <span ng-bind="ctrl.max"></span></div>
    <div>Value: <span ng-bind="ctrl.value"></span></div>
    <inv-stepper
        min="ctrl.min"
        max="ctrl.max"
        value="ctrl.value"
        on-change="ctrl.onChange">
    </inv-stepper>
    <br/>

    <div>isDisabled: <span ng-bind="ctrl.isDisabled"></span></div>
    <div>Value: <span ng-bind="ctrl.value"></span></div>
    <inv-stepper
        value="ctrl.value"
        is-disabled="ctrl.isDisabled">
    </inv-stepper>
    <br/>

    <div>isDisabled: <span ng-bind="ctrl.isDisabled"></span></div>
    <div>disabledMessage: <span ng-bind="ctrl.disabledMessage"></span></div>
    <div>Value: <span ng-bind="ctrl.value"></span></div>
    <inv-stepper
        value="ctrl.value"
        is-disabled="ctrl.isDisabled"
        disabled-message="ctrl.disabledMessage">
    </inv-stepper>
    <br/>

    <h1>Default Stepper</h1>
    <inv-stepper
        value="ctrl.value"
        default-stepper="true"
        on-change="ctrl.onChange"
        min="ctrl.min"
        max="ctrl.max">
    </inv-stepper>
    <br/>

    <div>isDisabled: <span ng-bind="ctrl.isDisabled"></span></div>
    <div>Value: <span ng-bind="ctrl.value"></span></div>
    <inv-stepper
        value="ctrl.value"
        default-stepper="true"
        is-disabled="ctrl.isDisabled">
    </inv-stepper>
    <br/>

    <div>isDisabled: <span ng-bind="ctrl.isDisabled"></span></div>
    <div>disabledMessage: <span ng-bind="ctrl.disabledMessage"></span></div>
    <div>Value: <span ng-bind="ctrl.value"></span></div>
    <inv-stepper
        value="ctrl.value"
        is-disabled="ctrl.isDisabled"
        default-stepper="true"
        disabled-message="ctrl.disabledMessage">
    </inv-stepper>
    <br/>

</div>