1

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 e.g. 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.

Tobias
  • 319
  • 1
  • 3
  • 18
  • Can you be more specific maybe give a picture or code snippet you try? It is not clear what you trying to achieve if it has to do with angular material form field the documentation is pretty good https://material.angular.io/components/form-field/overview – dt170 Feb 16 '22 at 08:20
  • @dt170 I tried to specify it a little bit further. I hope you understand what I am trying to archive now. I already read the documentation but there was nothing mentioned that I could use. – Tobias Feb 16 '22 at 09:44
  • so basically you want two inputs that binds together (to create range in numbers) ? – dt170 Feb 16 '22 at 11:39
  • Yes, thats what I need – Tobias Feb 17 '22 at 07:58
  • 1
    look here https://stackoverflow.com/questions/53852378/how-to-set-min-max-user-input-in-angular-2-material?rq=1 and bind your min to the min of the input that will do the trick – dt170 Feb 17 '22 at 16:28
  • https://stackoverflow.com/a/76057341/588759 – rofrol Apr 19 '23 at 17:33
  • Does this answer your question? [Input number in Angular Material Design?](https://stackoverflow.com/questions/45487647/input-number-in-angular-material-design) – rofrol Apr 19 '23 at 17:34

1 Answers1

-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 (i.e. from < to).

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

Angel Balashev
  • 59
  • 2
  • 5