import {Spinner} from 'primeng/primeng';
Spinner is applied to an input element using pSpinner directive.
<input type="text" pSpinner />
Boundaries are specified with min and max attributes.
<input type="text" pSpinner min="0" max="100"/>
Step factor is 1 by default and can be customized with step option.
<input type="text" pSpinner step="0.25"/>
Characters can be inserted before or after the value using prefix and suffix options.
<input type="text" pSpinner prefix="$"/>
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. |
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 |
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;
}