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 |
jQuery, jQuery UI WidgetFactory API, 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; }