import { AfterViewInit , Component , EventEmitter , forwardRef , Input , Output , OnDestroy , ViewChild } from '@angular/core' ; import { ControlValueAccessor , NG_VALUE_ACCESSOR } from '@angular/forms' ; import { DomSanitizer , SafeHtml } from '@angular/platform-browser' ; import { NouisliderComponent } from 'ng2-nouislider' ; import { Observable , Observer } from 'rxjs' ; import { debounceTime , distinctUntilChanged } from 'rxjs/operators' ; export interface SliderPips { mode : string ; values : number [ ] ; density : number ; stepped ? : boolean ; } export interface SliderProps { min : number ; max : number ; step ? : number ; pips ? : SliderPips ; valueUnit ? : string ; } @ Component ( { selector : 'slider-wrapper' , templateUrl : './slider-wrapper.component.html' , styleUrls : [ './slider-wrapper.component.scss' ] , providers : [ { provide : NG_VALUE_ACCESSOR , useExisting : forwardRef ( ( ) => SliderWrapperComponent ) , multi : true } ] } ) export class SliderWrapperComponent implements AfterViewInit , ControlValueAccessor , OnDestroy { @ ViewChild ( NouisliderComponent , { static : false } ) slider : NouisliderComponent ; @ Input ( ) label : string ; @ Input ( ) tooltip : string ; @ Input ( ) min : number ; @ Input ( ) max : number ; @ Input ( ) step : number ; @ Input ( ) pips : SliderPips ; @ Input ( ) valueUnit : string ; @ Output ( ) onChange = new EventEmitter < number > ( ) ; public value : number ; private changeObserver$ : Observer < number > ; private changeDebounceTime : number = 300 ; constructor ( private sanitizer ) { } ngAfterViewInit ( ) { if ( this . pips ) { this . slider . slider . pips ( this . pips ) ; } this . slider . slider . target . querySelector ( '.noUi-tooltip' ) . style . display = 'none' ; this . slider . slider . on ( 'start' , function ( ) { this . target . querySelector ( '.noUi-tooltip' ) . style . display = 'block' ; } ) ; this . slider . slider . on ( 'end' , function ( ) { this . target . querySelector ( '.noUi-tooltip' ) . style . display = 'none' ; } ) ; } ngOnDestroy ( ) { if ( this . changeObserver$ ) { this . changeObserver$ . complete ( ) ; } } writeValue ( value ) { this . value = value || this . min ; } registerOnChange ( fn ) { this . propagateChange = fn ; } registerOnTouched ( ) { } onSliderChange ( value ) { if ( ! this . changeObserver$ ) { Observable . create ( observer => { this . changeObserver$ = observer ; } ) . pipe ( debounceTime ( this . changeDebounceTime ) , distinctUntilChanged ( ) ) . subscribe ( this . propagateChange ) ; return ; } this . changeObserver$ . next ( value ) ; } htmlTooltip ( ) { return this . sanitizer . bypassSecurityTrustHtml ( this . tooltip ) ; } private propagateChange : any = ( ) => { } ; }