Improve this Doc View Source input[range]

input in module ng

Overview

Native range input with validation and transformation.

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 AngularJS:

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-model="model.value">, if the application sets model.value = null, the browser will set the input to '50'. AngularJS 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, AngularJS 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 AngularJS will set the step error on the input, and set the model to undefined.

Note that input[range] is not compatible withngMax, 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-model="string"
       [name="string"]
       [min="string"]
       [max="string"]
       [step="string"]
       [ng-change="expression"]
       [ng-checked="expression"]>

Arguments

Param	Type	Details
ngModel	`string`	Assignable AngularJS 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)	`expression`	AngularJS 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.

Examples

Range Input with ngMin & ngMax attributes

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