Spinner Spinner is an input component to provide a numerical input.

Basic

Min/Max

{{val2}}

Step

Disabled

Import


import {SpinnerModule} from 'primeng/spinner';

Getting Started

Two-way value binding is defined using standard ngModel directive.


<p-spinner size="30" [(ngModel)]="val"></p-spinner>

Model Driven Forms

Spinner can be used in a model driven form as well.


<p-spinner formControlName="age"></p-spinner>

Min-Max

Boundaries are specified with min and max attributes.


<p-spinner size="30" [(ngModel)]="val" [min]="0" [max]="100"></p-spinner>

Step

Step factor is 1 by default and can be customized with step option.


<p-spinner size="30" [(ngModel)]="val" [step]="0.25"></p-spinner>

Properties

Name Type Default Description
step number 1 Step factor to increment/decrement the value.
min number null Mininum boundary value.
max number null Maximum boundary value.
placeholder string null Hint text for the input field.
disabled boolean undefined When present, it specifies that the element should be disabled.
readonly boolean undefined When present, it specifies that the element should be read-only.
maxlength number null Maximum number of character allows in the input field.
size number null Size of the input field.
decimalSeparator string . Separator character for decimals.
thousandSeparator string , Separator character for thousands.
tabindex number null Index of the element in tabbing order.
formatInput boolean true When present, formats the user input.
inputId string null Identifier of the focus input to match a label defined for the component.
type string text Type of the input field.
required boolean false When present, it specifies that an input field must be filled out before submitting the form.

Events

Name Parameters Description
onBlur event: Blur event Callback to invoke when input loses focus.
onFocus event: Browser event Callback to invoke when input gets focus.
onChange event: Change event Callback to invoke on value change.

Styling

Following is the list of structural style classes, for theming classes visit theming page.

Name Element
ui-spinner Container element
ui-spinner-up Up element
ui-spinner-down Down button

Dependencies

None.

 View on GitHub 

<h3 class="first">Basic</h3>
<p-spinner size="30" [(ngModel)]="val1"></p-spinner>

<h3>Min/Max</h3>
<p-spinner size="30" [(ngModel)]="val2" [min]="0" [max]="100"></p-spinner>

<h3>Step</h3>
<p-spinner size="30" [(ngModel)]="val3" [step]="0.25"></p-spinner>

<h3>Disabled</h3>
<p-spinner size="30" [(ngModel)]="val4" [disabled]="true"></p-spinner>



export class SpinnerDemo {

    val1: number;

    val2: number;

    val3: number;

    val4: number = 100;
    
}