Add support for the input type=range

[leijou]

With multiple inputs to the same model <input type="number" /> doesn't play ball. It works as an input but updating it to a value set from another input always fails. Even if the source is also constrained as numeric (type="range" in chrome). This is due to the model being stored as a string.

Demo: http://jsfiddle.net/TXazw/5/Edit
Edit any input except the number and everything updates except the number input. Edit the number input and everything works fine.

A workaround is included. Uncomment parseFloat line and all inputs work correctly.

Should values not be automatically parsed when applied to a number type input? At the very least type="range" should be outputting a number rather than a string.

Discussed in the group:
https://groups.google.com/forum/?fromgroups#!topic/angular/Ecjx2fo8Qvk

[pkozlowski-opensource]

The behavior of the number input type is correct. What could be done here is to add support for the range input type (so it converts results to a number like the number input type).

Even if browsers support for the range isn't great (http://caniuse.com/#search=range) still people would mostly expect a number from the input type range.

[metamatt]

I agree; I would expect input(type=range) to yield a number in its ngModel. Thanks for working on this.

[btford]

As part of our effort to clean out old issues, this issue is being automatically closed since it has been inactivite for over two months.

Please try the newest versions of Angular (1.0.8 and 1.2.0-rc.1), and if the issue persists, comment below so we can discuss it.

Thanks!

[TylerEich]

As of v1.2.1, the issue persists

[mlegenhausen]

Same in v1.2.3.
There is no conversion done from type string to number which should be the expected behaviour.
Please reopen.

[nickretallack]

I just ran up against this problem. Very frustrating.

[stanleygu]

I encountered this issue where the slider toggle becomes stuck at 0 or 100 if the model is outside that range.

[andybak]

It looks like closed tickets are never looked at again so asking nicely to reopen doesn't work. I've reposted this issue here: #5892

[Virupax]

div ng-app ng-controller="Ctrl">
Range:

Text:

Select: 00.5 11.5 22.5 33.5 44.5 5

Number:



i: {{i}}

function Ctrl($scope) {
$scope.i=4;
$scope.$watch('i', function() {
//$scope.i = parseInt($scope.i);
});
}

Just change it to parseInt();