Stepper
Use the stepper to enable controlled increasing and decreasing of values. Configure the steps and choose to provide an input for manual entry.
Demo
<mbsc-stepper label="Adults" description="From 14 years" [min]="1" [max]="15"></mbsc-stepper>
<mbsc-stepper label="Children" description="2-14 years" [max]="15" inputPosition="start"></mbsc-stepper>
<mbsc-stepper label="Infant" description="0-2 years" [max]="10" inputPosition="start"></mbsc-stepper>
ComponentTemplate
import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { MbscModule, setOptions } from '@mobiscroll/angular';
setOptions({
theme: ' ',
themeVariant: ' ',
});
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
standalone: true,
imports: [CommonModule, MbscModule],
})
export class AppComponent {}
<mbsc-page>
<div class="mbsc-form-group">
<div class="mbsc-form-group-title">Stepper</div>
<mbsc-stepper label="Adults" description="From 14 years" [min]="1" [max]="15"></mbsc-stepper>
<mbsc-stepper label="Children" description="2-14 years" [max]="15" inputPosition="start"></mbsc-stepper>
<mbsc-stepper label="Infant" description="0-2 years" [max]="10" inputPosition="start"></mbsc-stepper>
</div>
</mbsc-page>