angular素材中的范围输入字段

Question

How can I implement a range input field using the angular material form field? It should look somehow similar to the range date picker but I could not figure out a way to implement this.

I want to implement eg a number input where the user can input a range. This should look similar to this example with the range date picker from angular material but for a standard number input field.

Answer 1

I had a similar issue so I followed what @dt170 had commented on the question. This is what worked for me:

<mat-form-field>
  <mat-label>From</mat-label>
  <input matInput #from type="number" formControlName="from" [max]="to.value">
</mat-form-field>

<mat-form-field>
  <mat-label>To</mat-label>
  <input matInput #to type="number" formControlName="to" [min]="from.value">
</mat-form-field>

It is quite a simple solution (may be imperfect but it works). The key part is that the [max] and [min] of the input fields - they are set to the values of each other so the range is valid (ie from < to).

*Both fields are invalid when the range is not valid.