Import
import { InputRangeModule } from '@backbase/ui-ang/input-range'
Usage
Use the bbInputRange directive to wire two bb-input-number-ui fields together, and apply bbInputRangeMin and bbInputRangeMax to enforce the range. When one value exceeds the other, the counterpart is auto-aligned.
<!-- Basic range with min/max kept in sync -->
<div bbInputRange>
<bb-input-number-ui
[bbInputRangeMin]="min.value"
label="Minimum"
[ngModel]="min.value"
(ngModelChange)="min.setValue($event)"
></bb-input-number-ui>
<bb-input-number-ui
[bbInputRangeMax]="max.value"
label="Maximum"
[ngModel]="max.value"
(ngModelChange)="max.setValue($event)"
></bb-input-number-ui>
</div>
Inputs
|
Input |
Format |
Default |
|---|---|---|
|
bbInputRangeMax |
number |
undefined |
|
bbInputRangeMin |
number |
undefined |
bbInputRangeMax
The bbInputRangeMax input applies a maximum validator to the associated bb-input-number-ui and keeps it aligned with the paired minimum when the maximum drops below the minimum.
<!-- Maximum value with auto-alignment when below min -->
<bb-input-number-ui
[bbInputRangeMax]="max.value"
label="Maximum"
[ngModel]="max.value"
(ngModelChange)="max.setValue($event)"
></bb-input-number-ui>
bbInputRangeMin
The bbInputRangeMin input applies a minimum validator to the associated bb-input-number-ui and keeps it aligned with the paired maximum when the minimum exceeds the maximum.
<!-- Ninimum value with auto-alignment when above max -->
<bb-input-number-ui
[bbInputRangeMin]="min.value"
label="Minimum"
[ngModel]="min.value"
(ngModelChange)="min.setValue($event)"
></bb-input-number-ui>
Behavior
- Auto-alignment: if the minimum becomes greater than the current maximum, the maximum is set to the minimum. If the maximum becomes less than the current minimum, the minimum is set to the maximum.
- Validation: numeric validators are applied to the respective controls when bbInputRangeMin / bbInputRangeMax are numbers.