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

Basic

Min/Max

Step

Prefix

Import


import {Spinner} from 'primeng/primeng';

Getting Started

Spinner is applied to an input element using pSpinner directive.


<input type="text" pSpinner />

Min-Max

Boundaries are specified with min and max attributes.


<input type="text" pSpinner min="0" max="100"/>

Step

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


<input type="text" pSpinner step="0.25"/>

Prefix and Suffix

Characters can be inserted before or after the value using prefix and suffix options.


<input type="text" pSpinner prefix="$"/>

Attributes

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.
prefix string null Prefix for the value.
suffix string null Suffix for the value.
disabled boolean false When present, it specifies that the element should be disabled.

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

PrimeUI Spinner.


<h3 class="first">Basic</h3>
<input type="text" size="30" pSpinner [(ngModel)]="val1"/>

<h3>Min/Max</h3>
<input type="text" size="30" pSpinner [(ngModel)]="val2" min="0" max="100"/>

<h3>Step</h3>
<input type="text" size="30" pSpinner [(ngModel)]="val3" step="0.25"/>

<h3>Prefix</h3>
<input type="text" size="30" pSpinner [(ngModel)]="val4" prefix="$"/>


export class SpinnerDemo {

    val1: number;

    val2: number;

    val3: number;

    val4: number = 100;
}