Improve this Doc View Source

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 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-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-model="string"
           [name="string"]
           [min="string"]
           [max="string"]
           [step="string"]
           [ng-change="string"]
           [ng-checked="expression"]>

### Arguments

Param | Type | Details
--- | --- | ---
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.

## Examples

    <script>
      angular.module('rangeExample', [])
        .controller('ExampleController', ['$scope', function($scope) {
          $scope.value = 75;
          $scope.min = 10;
          $scope.max = 90;
        }]);
    </script>
    <form name="myForm" ng-controller="ExampleController">

      Model as range: <input type="range" name="range" ng-model="value" min="{{min}}"  max="{{max}}">
      <hr>
      Model as number: <input type="number" ng-model="value"><br>
      Min: <input type="number" ng-model="min"><br>
      Max: <input type="number" ng-model="max"><br>
      value = <code>{{value}}</code><br/>
      myForm.range.$valid = <code>{{myForm.range.$valid}}</code><br/>
      myForm.range.$error = <code>{{myForm.range.$error}}</code>
    </form>

## Range Input with ngMin & ngMax attributes

    <script>
      angular.module('rangeExample', [])
        .controller('ExampleController', ['$scope', function($scope) {
          $scope.value = 75;
          $scope.min = 10;
          $scope.max = 90;
        }]);
    </script>
    <form name="myForm" ng-controller="ExampleController">
      Model as range: <input type="range" name="range" ng-model="value" ng-min="min" ng-max="max">
      <hr>
      Model as number: <input type="number" ng-model="value"><br>
      Min: <input type="number" ng-model="min"><br>
      Max: <input type="number" ng-model="max"><br>
      value = <code>{{value}}</code><br/>
      myForm.range.$valid = <code>{{myForm.range.$valid}}</code><br/>
      myForm.range.$error = <code>{{myForm.range.$error}}</code>
    </form>