# ngx-numeric-range-form-field
An Angular Material UI numeric range input form field. It is based on custom form field control and control value accessor which allows inserting range numbers, minimum and maximum.
[](https://GitHub.com/Naereen/StrapDown.js/graphs/commit-activity)
[](https://github.com/prettier/prettier)
[](https://app.fossa.com/projects/git%2Bgithub.com%2FOubayda-Khayata%2Fngx-numeric-range-form-field?utm_source=share_link)
# Feature
- Two inputs as one field.
- Auto range validation.
- Supports reactive forms.
**[View live demo on StackBlitz.](https://ngx-custom-numeric-range-form-field.stackblitz.io)**
# Install
```shell
npm install ngx-custom-numeric-range-form-field
```
# Usage
In component HTML:
```html
```
In component.ts:
```typescript
form: FormGroup;
constructor() {
this.form = new FormGroup({
range: new FormControl({
minimum: 10,
maximum: 100,
}, [
Validators.required, //optional
Validators.min(10), //optional
Validators.max(100), //optional
]),
});
}
get rangeControl(): FormControl {
return this.form.get('range') as FormControl;
}
onBlur(): void {
console.log('Value', this.rangeControl.value);
}
onEnter(): void {
console.log('Enter pressed!');
}
onValueChange(value: any): void {
console.log('Changed value: ', value);
}
```
Customizable input and output decorators:
```typescript
@Input() label: string; // Label of the control
@Input() appearance: 'legacy' | 'standard' | 'fill' | 'outline' = 'outline';
@Input() floatLabel: 'always' | 'never' | 'auto' = 'always';
@Input() minPlaceholder = 'From'; // Placeholder of the minimum value control
@Input() maxPlaceholder = 'To'; // Placeholder of the maximum value control
@Input() readonly = false; // Indicator wether the both controls are readonly
@Input() minReadonly = false; // Indicator wether the minimum control is readonly
@Input() maxReadonly = false; // Indicator wether the maximum control is readonly
@Input() resettable = true; // Indicator wether the both controls are resettable
@Input() required: boolean; // Required validation
@Input() requiredErrorMessage = 'Field is required!'; // Customizable error message when field is required
@Input() minimumErrorMessage = 'Minimum has been reached!'; // Customizable error message when field has min validation
@Input() maximumErrorMessage = 'Maximum has exceeded!'; // Customizable error message when field has max validation
@Input() invalidRangeErrorMessage = 'Inserted range is not valid!'; // Customizable error message when field has invalid numeric range
@Input() minimumControlName = 'minimum'; // Customizable minimum control name
@Input() maximumControlName = 'maximum'; // Customizable maximum control name
@Input() updateOn: 'change' | 'blur' | 'submit' = 'change'; // The event name for control to update upon
@Input() controlStyle = ''; // Custom control style
@Output() blurred = new EventEmitter(); // Event which emits where user leaves control (focus out)
@Output() enterPressed = new EventEmitter(); // Event which emits when enter is pressed
@Output() numericRangeChanged = new EventEmitter(); // Event which emits when one of range value is changed
```
# License
Apache License
Copyright (c) 2022 Dino Klicek, Edited by Oubayda Khayata