input[range] max is interpolated after model value is set

[N0NamedGuy]

Fiddle here: https://jsfiddle.net/dserrano_lnk/fy93ptkk/

Assume all atributes are interpolated (min and max) and bound (using ng-model) on the input[range].

If the range's max is over 100 (eg. 200), and the value is set over 100, the range's value will be "stuck" at 100 (the default max value for a range). When the range's max attribute is updated, the range's value stays at 100, while in the model the value is still 200.

I worked around on this, by using a $timeout.

[gkalpak]

input[type="range"] is not a supported type in Angular (e.g. see #5892), so (when using ngModel on it) it falls back to input[type="text"]. This can lead to all sorts of weird behaviors.

Among other things, the min and max attributes are not watched by Angular for changes, so there will be no re-rendering once they change from {{vm.max}} to 200 for example.

Basically, here is what is going on:

1. Initially, the element's max and min properties are set to {{vm.max}}/{{vm.min}} respectively.
   Since these are invalid values, the actual limits fall back to the default: 0 - 100
2. ngModelController applies the modelValue (200) to the input. Since the max allowed value is currently 100, the input's value is set to 100.
3. Interpollation kicks in asynchronously and sets max/min to 200/0 respectively.
   The browser updates the input's limits in the UI.
4. Since there has been no change in the modelValue or the viewValue, ngModelController doesn't "understand" it has to re-$render() (so it doesn't). As a result, the input's viewValue remains at 100 (and the modelValue remains at 200).

This is a problem for input[type="range"], because (unlike all other input types) its "display value" (what the user sees, i.e. the position of the knob) may change even if it's actual value hasn't changed.
Basically, you need to let ngModelController know, that max/min/ngMax/ngMin needs to be watched over and when the corresponding attribute value changes, it needs to re-$render().

Here is a quick demo: Updated fiddle

Closing the issue as currently there is no support for input[type="range"] and adding support for it is tracked in #5892.

[N0NamedGuy]

Thank you for your input and fix =)