Input - Spinner - 《PrimeNG Document》

Documentation
Source

SpinnerSpinner is an input component to provide a numerical input.

Documentation

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.
tabindex	number	null	Index of the element in tabbing order.
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.
name	string	null	Name of the input field.
inputStyle	string	null	Inline style of the input field.
inputStyleClass	string	null	Style class of the input field.

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.

Source

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;
}