Angular JS Directive For Number Range

Here is my custom Angular JS Directive to ensure user input is within the valid number range. The code works like this:

  • The user input is parsed by a regex expression to ensure that only digits are allowed.
  • Once it gets parsed, it will check if the value is within the number range specified using range-min and range-max attributes.
  • If it is below the range minimum, set the ngModel value to the range minimum value.
  • If it is more than the range maximum, set the ngModel value to the range maximum value.

Here is the Javascript code for the directive.

And here is the sample HTML code.

A good case scenario to apply this directive is for input fields for percentage where 1-100 is your number range.

Related Posts Plugin for WordPress, Blogger...

1 comment

Leave a Reply

Your email address will not be published. Required fields are marked *