feat(input): add support for input[type=range]

the input[type=range] behavior is the same of an input[type=number]
with min=0, max=100 and step=1 as defaults

Closes angular#5892
Closes angular#9715

Author: cironunes

src/ng/directive/input.js

@@ -1031,6 +1031,62 @@ var inputType = {
    */
   'radio': radioInputType,
 
+  /**
+   * @ngdoc input
+   * @name input[range]
+   *
+   * @description
+   * Native range input with number validation and transformation. Sets the `number` validation
+   * to always have a valid number.
+   *
+   * @param {string} ngModel Assignable angular expression to data-bind to.
+   * @param {string=} name Property name of the form under which the control is published.
+   * @param {string=} min Sets the `min` validation to ensure that the value entered is greater the `min`.
+   * @param {string=} max Sets the `max` validation to ensure that the value entered is lesser than `max`.
+   * @param {string=} ngPattern Sets `pattern` validation error key if the value does not match the
+   *    RegExp pattern expression. Expected value is `/regexp/` for inline patterns or `regexp` for
+   *    patterns defined as scope expressions.
+   * @param {string=} ngChange Angular expression to be executed when input changes due to user
+   *    interaction with the input element.
+   *
+   * @example
+      <example name="range-input-directive" module="rangeExample">
+        <file name="index.html">
+         <script>
+           angular.module('rangeExample', [])
+             .controller('ExampleController', ['$scope', function($scope) {
+               $scope.value = 50;
+             }]);
+         </script>
+         <form name="myForm" ng-controller="ExampleController">
+           Number: <input type="range" name="input" ng-model="value"
+                          min="0" max="100">
+           <tt>value = {{value}}</tt><br/>
+           <tt>myForm.input.$valid = {{myForm.input.$valid}}</tt><br/>
+           <tt>myForm.input.$error = {{myForm.input.$error}}</tt><br/>
+           <tt>myForm.$valid = {{myForm.$valid}}</tt><br/>
+          </form>
+        </file>
+        <file name="protractor.js" type="protractor">
+          var value = element(by.binding('value'));
+          var valid = element(by.binding('myForm.input.$valid'));
+          var input = element(by.model('value'));
+
+          it('should initialize to model', function() {
+            expect(value.getText()).toContain('50');
+            expect(valid.getText()).toContain('true');
+          });
+
+          it('should respect the max', function() {
+            input.clear();
+            input.sendKeys('123');
+            expect(value.getText()).toEqual('value = 100');
+            expect(valid.getText()).toContain('true');
+          });
+        </file>
+      </example>
+   */
+  'range': numberInputType,
 
   /**
    * @ngdoc input

test/ng/directive/inputSpec.js

@@ -2819,6 +2819,260 @@ describe('input', function() {
     });
   });
 
+  describe('range', function() {
+
+    it('should reset the model if view is invalid', function() {
+      compileInput('<input type="range" ng-model="age"/>');
+
+      scope.$apply('age = 100');
+      expect(inputElm.val()).toBe('100');
+
+      try {
+        // to allow non-number values, we have to change type so that
+        // the browser which have number validation will not interfere with
+        // this test. IE8 won't allow it hence the catch.
+        inputElm[0].setAttribute('type', 'text');
+      } catch (e) {}
+
+      changeInputValueTo('100X');
+      expect(inputElm.val()).toBe('100X');
+      expect(scope.age).toBeUndefined();
+      expect(inputElm).toBeInvalid();
+    });
+
+
+    it('should render as 50 if null', function() {
+      compileInput('<input type="range" ng-model="age" />');
+
+      scope.$apply('age = null');
+
+      expect(scope.age).toBeNull();
+      expect(inputElm.val()).toEqual('50');
+    });
+
+    it('should come up as 50 when no value specified', function() {
+      compileInput('<input type="range" ng-model="age" />');
+
+      expect(inputElm.val()).toBe('50');
+
+      scope.$apply('age = null');
+
+      expect(scope.age).toBeNull();
+      expect(inputElm.val()).toBe('50');
+    });
+
+
+    it('should parse empty string to 50', function() {
+      compileInput('<input type="range" ng-model="age" />');
+
+      scope.$apply('age = 10');
+
+      changeInputValueTo('');
+      expect(scope.age).toBe(50);
+      expect(inputElm).toBeValid();
+    });
+
+
+    it('should only invalidate the model if suffering from bad input when the data is parsed', function() {
+      compileInput('<input type="range" ng-model="age" />', {
+        valid: false,
+        badInput: true
+      });
+
+      expect(scope.age).toBeUndefined();
+      expect(inputElm).toBeValid();
+
+      changeInputValueTo('this-will-fail-because-of-the-badInput-flag');
+
+      expect(scope.age).toBeUndefined();
+      expect(inputElm).toBeInvalid();
+    });
+
+
+    it('should validate with undefined viewValue when $validate() called', function() {
+      compileInput('<input type="range" name="alias" ng-model="value" />');
+
+      scope.form.alias.$validate();
+
+      expect(inputElm).toBeValid();
+      expect(scope.form.alias.$error.number).toBeUndefined();
+    });
+
+
+    it('should throw if the model value is not a number', function() {
+      expect(function() {
+        scope.value = 'one';
+        compileInput('<input type="range" ng-model="value" />');
+      }).toThrowMinErr('ngModel', 'numfmt', "Expected `one` to be a number");
+    });
+
+
+    describe('min', function() {
+
+      it('should validate', function() {
+        compileInput('<input type="range" ng-model="value" name="alias" min="10" />');
+
+        changeInputValueTo('5');
+        expect(inputElm).toBeValid();
+        expect(scope.value).toBe(10);
+        expect(scope.form.alias.$error.min).toBeFalsy();
+
+        changeInputValueTo('100');
+        expect(inputElm).toBeValid();
+        expect(scope.value).toBe(100);
+        expect(scope.form.alias.$error.min).toBeFalsy();
+      });
+
+      it('should validate even if min value changes on-the-fly', function() {
+        scope.min = 10;
+        compileInput('<input type="range" ng-model="value" name="alias" min="{{min}}" />');
+
+        changeInputValueTo('15');
+        expect(inputElm).toBeValid();
+
+        scope.min = 20;
+        scope.$digest();
+        expect(inputElm).toBeInvalid();
+
+        scope.min = null;
+        scope.$digest();
+        expect(inputElm).toBeValid();
+
+        scope.min = '20';
+        scope.$digest();
+        expect(inputElm).toBeInvalid();
+
+        scope.min = 'abc';
+        scope.$digest();
+        expect(inputElm).toBeValid();
+      });
+    });
+
+    describe('ngMin', function() {
+
+      it('should validate', function() {
+        compileInput('<input type="range" ng-model="value" name="alias" ng-min="50" />');
+
+        changeInputValueTo('1');
+        expect(inputElm).toBeInvalid();
+        expect(scope.value).toBeFalsy();
+        expect(scope.form.alias.$error.min).toBeTruthy();
+
+        changeInputValueTo('100');
+        expect(inputElm).toBeValid();
+        expect(scope.value).toBe(100);
+        expect(scope.form.alias.$error.min).toBeFalsy();
+      });
+
+      it('should validate even if the ngMin value changes on-the-fly', function() {
+        scope.min = 10;
+        compileInput('<input type="range" ng-model="value" name="alias" ng-min="min" />');
+
+        changeInputValueTo('15');
+        expect(inputElm).toBeValid();
+
+        scope.min = 20;
+        scope.$digest();
+        expect(inputElm).toBeInvalid();
+
+        scope.min = null;
+        scope.$digest();
+        expect(inputElm).toBeValid();
+
+        scope.min = '20';
+        scope.$digest();
+        expect(inputElm).toBeInvalid();
+
+        scope.min = 'abc';
+        scope.$digest();
+        expect(inputElm).toBeValid();
+      });
+    });
+
+
+    describe('max', function() {
+
+      it('should validate', function() {
+        compileInput('<input type="range" ng-model="value" name="alias" max="10" />');
+
+        changeInputValueTo('20');
+        expect(inputElm).toBeValid();
+        expect(scope.value).toBe(10);
+        expect(scope.form.alias.$error.max).toBeFalsy();
+
+        changeInputValueTo('0');
+        expect(inputElm).toBeValid();
+        expect(scope.value).toBe(0);
+        expect(scope.form.alias.$error.max).toBeFalsy();
+      });
+
+      it('should validate even if max value changes on-the-fly', function() {
+        scope.max = 10;
+        compileInput('<input type="range" ng-model="value" name="alias" max="{{max}}" />');
+
+        changeInputValueTo('5');
+        expect(inputElm).toBeValid();
+
+        scope.max = 0;
+        scope.$digest();
+        expect(inputElm).toBeInvalid();
+
+        scope.max = null;
+        scope.$digest();
+        expect(inputElm).toBeValid();
+
+        scope.max = '4';
+        scope.$digest();
+        expect(inputElm).toBeInvalid();
+
+        scope.max = 'abc';
+        scope.$digest();
+        expect(inputElm).toBeValid();
+      });
+    });
+
+    describe('ngMax', function() {
+
+      it('should validate', function() {
+        compileInput('<input type="range" ng-model="value" name="alias" ng-max="5" />');
+
+        changeInputValueTo('20');
+        expect(inputElm).toBeInvalid();
+        expect(scope.value).toBeUndefined();
+        expect(scope.form.alias.$error.max).toBeTruthy();
+
+        changeInputValueTo('0');
+        expect(inputElm).toBeValid();
+        expect(scope.value).toBe(0);
+        expect(scope.form.alias.$error.max).toBeFalsy();
+      });
+
+      it('should validate even if the ngMax value changes on-the-fly', function() {
+        scope.max = 10;
+        compileInput('<input type="range" ng-model="value" name="alias" ng-max="max" />');
+
+        changeInputValueTo('5');
+        expect(inputElm).toBeValid();
+
+        scope.max = 0;
+        scope.$digest();
+        expect(inputElm).toBeInvalid();
+
+        scope.max = null;
+        scope.$digest();
+        expect(inputElm).toBeValid();
+
+        scope.max = '4';
+        scope.$digest();
+        expect(inputElm).toBeInvalid();
+
+        scope.max = 'abc';
+        scope.$digest();
+        expect(inputElm).toBeValid();
+      });
+    });
+
+  });
 
   describe('email', function() {