Using range inputs with AngularJS

I was working on an AngularJS project recently that used HTML input sliders like this:

<input type="range" ng-model="value" min="1" max="100">

Angular supports number inputs but doesn’t entirely support range inputs. They work for the most part; the ng-model binds correctly and you can use events like ng-click and ng-change fine. However, the model’s value is always a string, whereas for number inputs the value gets correctly coerced to a number.

Fortunately this is fairly easy to fix by using ngModel.NgModelController (see the docs). By requiring ngModel in our directive it gets passed as a fourth parameter to the link function. Now we can access the $parsers array which is used to transform the value.

Here’s a parser that coerces the value to a number:

yourApp.directive('input', function() {
  return {
    restrict: 'E',
    require: '?ngModel',
    link: function(scope, element, attrs, ngModel) {
      if ('type' in attrs && attrs.type.toLowerCase() === 'range') {
        ngModel.$parsers.push(parseFloat);
      }
    }
  };
});

Since parseFloat already takes a string and returns a number we don’t even need to wrap it in a function. Pretty neat!