wip: account for automatic setting of values in browsers

Author: Narretz

src/ng/directive/input.js

@@ -1482,15 +1482,86 @@ function numberInputType(scope, element, attr, ctrl, $sniffer, $browser) {
 }
 
 function rangeInputType(scope, element, attr, ctrl, $sniffer, $browser) {
-  numberInputType(scope, element, attr, ctrl, $sniffer, $browser);
+  badInputChecker(scope, element, attr, ctrl);
+  baseInputType(scope, element, attr, ctrl, $sniffer, $browser);
+
+  var minVal = 0, maxVal = 100;
+
+  ctrl.$$parserName = 'number';
+  ctrl.$parsers.push(function(value) {
+    if (ctrl.$isEmpty(value))      return null;
+    if (NUMBER_REGEXP.test(value)) return parseFloat(value);
+    return undefined;
+  });
+
+  ctrl.$formatters.push(function(value) {
+    if (!ctrl.$isEmpty(value)) {
+      if (!isNumber(value)) {
+        throw ngModelMinErr('numfmt', 'Expected `{0}` to be a number', value);
+      }
+      value = value.toString();
+    }
+    return value;
+  });
+
+  function minChange(val) {
+    if (isDefined(val) && !isNumber(val)) {
+      val = parseFloat(val);
+    }
+    minVal = isNumber(val) && !isNaN(val) ? val : undefined;
+    // TODO(matsko): implement validateLater to reduce number of validations
+    ctrl.$validate();
+  }
+
+  if (isDefined(attr.min) || attr.ngMin) {
+    ctrl.$validators.min = function(value) {
+      return ctrl.$isEmpty(value) || isUndefined(minVal) || value >= minVal;
+    };
+
+    minChange(attr.min);
+    attr.$observe('min', minChange);
+  }
+
+  function maxChange(val) {
+    if (isDefined(val) && !isNumber(val)) {
+      val = parseFloat(val);
+    }
+    maxVal = isNumber(val) && !isNaN(val) ? val : undefined;
+    // TODO(matsko): implement validateLater to reduce number of validations
+    ctrl.$validate();
+  }
+
+  if (isDefined(attr.max) || attr.ngMax) {
+    ctrl.$validators.max = ctrl.$$hasNativeValidators && isObject(element[0].validity) ?
+      function(value) {
+        return !element[0].validity.rangeOverflow;
+      } :
+      function(modelValue, viewValue) {
+        return ctrl.$isEmpty(viewValue) || isUndefined(maxVal) || viewValue <= maxVal;
+      };
+
+    console.log('max initial', attr.max);
+    maxChange(attr.max);
+    attr.$observe('max', maxChange);
+  }
 
   var originalRender = ctrl.$render;
 
   ctrl.$render = function() {
     if (ctrl.$isEmpty(ctrl.$viewValue)) {
-      ctrl.$viewValue = '50';
+      // Browsers that implement range do this automatically, but IE9 does not
+      var viewValue = minVal + (maxVal - minVal) / 2;
+      ctrl.$viewValue = viewValue;
+      originalRender();
+      ctrl.$setViewValue(viewValue);
+    } else if (ctrl.$viewValue > maxVal) {
+      ctrl.$viewValue = maxVal;
+      originalRender();
+      ctrl.$setViewValue(ctrl.$viewValue);
+    } else if (ctrl.$viewValue < minVal) {
+      ctrl.$viewValue = minVal;
       originalRender();
-      ctrl.$setViewValue('50');
+      ctrl.$setViewValue(ctrl.$viewValue);
     } else {
       originalRender();
     }

test/ng/directive/inputSpec.js

@@ -3039,6 +3039,15 @@ describe('input', function() {
           expect(scope.value).toBe(0);
           expect(scope.form.alias.$error.max).toBeFalsy();
         });
+
+        it('should set the model to the max val if it is more than the max val', function() {
+          scope.value = 90;
+          var inputElm = helper.compileInput('<input type="range" ng-model="value" name="alias" max="10" />');
+
+          expect(inputElm).toBeValid();
+          expect(inputElm.val()).toBe('10');
+          expect(scope.value).toBe(10);
+        });
       }
 
       it('should validate if "range" is not implemented', function() {
@@ -3125,6 +3134,15 @@ describe('input', function() {
       });
     });
 
+    it('should set the correct initial view and model when min and max are specified', function() {
+      scope.max = 80;
+      scope.min = 40;
+      var inputElm = helper.compileInput('<input type="range" ng-model="value" name="alias" max="{{max}}" min="{{min}}" />');
+
+      expect(inputElm.val()).toBe('60');
+      expect(scope.value).toBe(60);
+    });
+
   });
 
   describe('email', function() {