Skip to content
This repository was archived by the owner on Apr 12, 2024. It is now read-only.

feat(input): add support to input[type=range] #9715

Closed
wants to merge 1 commit into from
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
56 changes: 56 additions & 0 deletions src/ng/directive/input.js
Original file line number Diff line number Diff line change
Expand Up @@ -830,6 +830,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
Expand Down
Loading