<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example - example-range-input-directive-production</title>
  

  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.min.js"></script>
  

  
</head>
<body ng-app="rangeExample">
  <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>
</body>
</html>