import { Directive , ElementRef , forwardRef , HostListener , Input } from '@angular/core' ; import { ControlValueAccessor , NG_VALUE_ACCESSOR } from '@angular/forms' ; import { RangeOptions } from '../interfaces/form.interface' ; @ Directive ( { selector : '[msInputRange][formControlName],[msInputRange][formControl],[msInputRange][ngModel]' , providers : [ { provide : NG_VALUE_ACCESSOR , useExisting : forwardRef ( ( ) => InputRangeDirective ) , multi : true } ] } ) export class InputRangeDirective implements ControlValueAccessor { /**
     * Range options
     */ @ Input ( ) msInputRange : RangeOptions ; constructor ( public elementRef ) { } registerOnChange ( fn ) { this . onChange = fn ; } registerOnTouched ( fn ) { this . onTouched = fn ; } setDisabledState ( isDisabled ) { } writeValue ( obj ) { if ( this . msInputRange . defaultValue == null ) { this . msInputRange . defaultValue = 0 ; } else if ( this . msInputRange . defaultValue > this . msInputRange . max ) { this . msInputRange . defaultValue = this . msInputRange . max ; } else if ( this . msInputRange . defaultValue < this . msInputRange . min ) { this . msInputRange . defaultValue = this . msInputRange . min ; } this . elementRef . nativeElement . value = this . msInputRange . defaultValue ; } @ HostListener ( 'blur' ) onBlur ( ) { this . onTouched ( ) ; } @ HostListener ( 'input' , [ '$event' ] ) onInput ( event ) { const value = typeof this . msInputRange . normalize === 'function' ? this . msInputRange . normalize ( event . target . value , this . msInputRange ) : + event . target . value ; this . elementRef . nativeElement . value = value ; this . onChange ( value ) ; } /**
     * On touched handler
     */ private onTouched = ( ) => { } ; /**
     * On change handler
     */ private onChange : ( value : number ) => void = ( ) => { } ; }