Skip to content

Add support for the input type=range #1189

Closed
leijou opened this Issue Jul 20, 2012 · 9 comments

10 participants

@leijou
leijou commented Jul 20, 2012

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
Angular member

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 btford closed this Aug 24, 2013
@btford
btford commented Aug 24, 2013

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
andybak commented Jan 20, 2014

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

@TylerEich TylerEich pushed a commit to TylerEich/angular.js that referenced this issue May 6, 2014
Tyler Eich feat(input): add input type=range support
Bind model of <input type="range"> to number (like <input type="number">) rather than string. Range inputs represent numerical values; therefore, a numerical binding makes more sense than a string binding.

Closes #1189, #5892
66d0419
@Virupax
Virupax commented Dec 16, 2015

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();

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.