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

Basic

Min/Max

Step

Disabled

Import


import {Spinner} from 'primeng/primeng';

Getting Started

Spinner is defined using p-spinner element. Value of the component should be a number.


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

Min-Max

Boundaries are specified with min and max attributes.


<p-spinner size="30" [(value)]="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" [(value)]="val" [step]="0.25"></p-spinner>

Attributes

Name Type Default Description
value number null Value of the component.
step number 1 Step factor to increment/decrement the value.
min number null Mininum boundary value.
max number null Maximum boundary value.
disabled boolean false When present, it specifies that the element should be disabled.
maxlength number null Maximum number of character allows in the input field.
size number null Size of the input field.

Events

Name Parameters Description
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

Native component that requires the css of Spinner.


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

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

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

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


export class SpinnerDemo {

    val1: number;

    val2: number;

    val3: number;

    val4: number = 100;
}