Range input with min/max bindings is not setting its value properly

[Julien-Marcou]

Which @angular/* package(s) are the source of the bug?

forms

Is this a regression?

No

Description

Considering you have the following signals you want to bind to an input[type="range"]:

protected readonly value = signal(200);
protected readonly min = signal(100);
protected readonly max = signal(300);

When using [min]="min()" & [max]="max()" to bind the min & max attributes, the value is not properly set.

<!-- not working -->
<input type="range" [value]="value()" [min]="min()" [max]="max()" step="100" />

But when using min="{{ min() }} & max="{{ max() }}" everything works.

<!-- working -->
<input type="range" [value]="value()" min="{{ min() }}" max="{{ max() }}" step="100" />

Please provide a link to a minimal reproduction of the bug

No response

Please provide the exception or error you saw

Please provide the environment you discovered this bug in (run ng version)

Angular CLI       : 22.0.0
Angular           : 22.0.0
Node.js           : 24.16.0
Package Manager   : npm 11.16.0
Operating System  : linux x64

┌───────────────────────────┬───────────────────┬───────────────────┐
│ Package                   │ Installed Version │ Requested Version │
├───────────────────────────┼───────────────────┼───────────────────┤
│ @angular/build            │ 22.0.0            │ ^22.0.0           │
│ @angular/cli              │ 22.0.0            │ ^22.0.0           │
│ @angular/common           │ 22.0.0            │ ^22.0.0           │
│ @angular/compiler         │ 22.0.0            │ ^22.0.0           │
│ @angular/compiler-cli     │ 22.0.0            │ ^22.0.0           │
│ @angular/core             │ 22.0.0            │ ^22.0.0           │
│ @angular/forms            │ 22.0.0            │ ^22.0.0           │
│ @angular/platform-browser │ 22.0.0            │ ^22.0.0           │
│ @angular/router           │ 22.0.0            │ ^22.0.0           │
│ rxjs                      │ 7.8.2             │ ~7.8.2            │
│ typescript                │ 6.0.3             │ ~6.0.3            │
└───────────────────────────┴───────────────────┴───────────────────┘

Anything else?

The weird thing is that when using input[type="number"], it's always working, no matter if I use [min]="min()" or min="{{ min() }}"

I'm not sure if this is related to #68480 or not, because this time I'm not using [formField] at all, but it seems to be a similar problem.

[JoostK]

The root cause here is browser behavior, as this reproduces using plain JS.

The interpolation syntax ends up swapping the assignment ordering, moving the value binding last. Angular does not make any guarantees w.r.t. input binding order.

[Julien-Marcou]

Oh, nice catch, wouldn't have thought of this being a plain JS issue 😅

Is there a way to force the binding order, so I'm sure this won't happen? Like always putting the value at the end?

[JoostK]

Is there a way to force the binding order, so I'm sure this won't happen? Like always putting the value at the end?

Yeah, binding [value] last avoids this, but as mentioned there isn't a strict framework guarantee about binding order. It is somewhat reasonable to assume that bindings of the same type (e.g. all property bindings) are assigned in template order, so putting [value] last seems like a reasonable approach. Please also check any formatter/linter tooling as well, as any binding order rules may affect this.