W3cubDocs

Improve this Doc View Source input[range]

input in module ng

Native range input with validation and transformation.

In v1.5.9+, in order to avoid interfering with already existing, custom directives for input[range], you need to let Angular know that you want to enable its built-in support. You can do this by adding the ng-input-range attribute to the input element. E.g.: <input type="range" ng-input-range ... />

Input elements without the ng-input-range attibute will continue to be treated the same as in previous versions (e.g. their model value will be a string not a number and Angular will not take min/max/step attributes and properties into account).

Note: From v1.6.x onwards, the support for input[range] will be always enabled and the ng-input-range attribute will have no effect.

This documentation page refers to elements which have the built-in support enabled; i.e. elements with the ng-input-range attribute.

The model for the range input must always be a Number.

IE9 and other browsers that do not support the range type fall back to a text input without any default values for min, max and step. Model binding, validation and number parsing are nevertheless supported.

Browsers that support range (latest Chrome, Safari, Firefox, Edge) treat input[range] in a way that never allows the input to hold an invalid value. That means:

any non-numerical value is set to (max + min) / 2.
any numerical value that is less than the current min val, or greater than the current max val is set to the min / max val respectively.
additionally, the current step is respected, so the nearest value that satisfies a step is used.

See the HTML Spec on input[type=range]) for more info.

This has the following consequences for Angular:

Since the element value should always reflect the current model value, a range input will set the bound ngModel expression to the value that the browser has set for the input element. For example, in the following input <input type="range" ng-input-range ng-model="model.value">, if the application sets model.value = null, the browser will set the input to '50'. Angular will then set the model to 50, to prevent input and model value being out of sync.

That means the model for range will immediately be set to 50 after ngModel has been initialized. It also means a range input can never have the required error.

This does not only affect changes to the model value, but also to the values of the min, max, and step attributes. When these change in a way that will cause the browser to modify the input value, Angular will also update the model value.

Automatic value adjustment also means that a range input element can never have the required, min, or max errors.

However, step is currently only fully implemented by Firefox. Other browsers have problems when the step value changes dynamically - they do not adjust the element value correctly, but instead may set the stepMismatch error. If that's the case, the Angular will set the step error on the input, and set the model to undefined.

Note that input[range] is not compatible with ngMax, ngMin, and ngStep, because they do not set the min and max attributes, which means that the browser won't automatically adjust the input value based on their values, and will always assume min = 0, max = 100, and step = 1.

Directive Info

This directive executes at priority level 0.

Usage

<input type="range"
       ng-input-range=""
       ng-model="string"
       [name="string"]
       [min="string"]
       [max="string"]
       [step="string"]
       [ng-change="string"]
       [ng-checked="expression"]>

Arguments

Param	Type	Details
ngInputRange		The presense of this attribute enables the built-in support for `input[range]`.
ngModel	`string`	Assignable angular expression to data-bind to.
name (optional)	`string`	Property name of the form under which the control is published.
min (optional)	`string`	Sets the `min` validation to ensure that the value entered is greater than `min`. Can be interpolated.
max (optional)	`string`	Sets the `max` validation to ensure that the value entered is less than `max`. Can be interpolated.
step (optional)	`string`	Sets the `step` validation to ensure that the value entered matches the `step` Can be interpolated.
ngChange (optional)	`string`	Angular expression to be executed when the ngModel value changes due to user interaction with the input element.
ngChecked (optional)	`expression`	If the expression is truthy, then the `checked` attribute will be set on the element. Note : `ngChecked` should not be used alongside `ngModel`. Checkout ngChecked for usage.

Range Input with ngMin & ngMax attributes

© 2010–2017 Google, Inc.
Licensed under the Creative Commons Attribution License 4.0.
https://code.angularjs.org/1.5.11/docs/api/ng/input/input%5Brange%5D