feat(core): Added RangeControlValueAccessor

relates #14

Author: Airblader

projects/ngqp/core/src/lib/accessors/accessors.ts

@@ -1,3 +1,4 @@
 export { DefaultControlValueAccessorDirective } from './default-control-value-accessor.directive';
 export { NumberControlValueAccessorDirective } from './number-control-value-accessor.directive';
+export { RangeControlValueAccessorDirective } from './range-control-value-accessor.directive';
 export { SelectControlValueAccessorDirective, NgqpSelectOptionDirective } from './select-control-value-accessor.directive';

projects/ngqp/core/src/lib/accessors/number-control-value-accessor.directive.ts

@@ -31,7 +31,7 @@ export class NumberControlValueAccessorDirective implements ControlValueAccessor
     constructor(private renderer: Renderer2, private elementRef: ElementRef) {
     }
 
-    public writeValue(value: string) {
+    public writeValue(value: any) {
         const normalizedValue = value === null ? '' : value;
         this.renderer.setProperty(this.elementRef.nativeElement, 'value', normalizedValue);
     }

projects/ngqp/core/src/lib/accessors/range-control-value-accessor.directive.ts

@@ -0,0 +1,49 @@
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { Directive, ElementRef, forwardRef, HostListener, Renderer2 } from '@angular/core';
+
+export const NGQP_RANGE_VALUE_ACCESSOR: any = {
+    provide: NG_VALUE_ACCESSOR,
+    useExisting: forwardRef(() => RangeControlValueAccessorDirective),
+    multi: true
+};
+
+@Directive({
+    selector: 'input[type=range][queryParamName]',
+    providers: [NGQP_RANGE_VALUE_ACCESSOR],
+})
+export class RangeControlValueAccessorDirective implements ControlValueAccessor {
+
+    private fnChange = (_: number) => {};
+    private fnTouched = () => {};
+
+    @HostListener('input', ['$event'])
+    public onInput(event: UIEvent) {
+        const value = (event.target as HTMLInputElement).value;
+        this.fnChange(value === '' ? null : parseFloat(value));
+    }
+
+    @HostListener('blur')
+    public onBlur() {
+        this.fnTouched();
+    }
+
+    constructor(private renderer: Renderer2, private elementRef: ElementRef) {
+    }
+
+    public writeValue(value: any) {
+        this.renderer.setProperty(this.elementRef.nativeElement, 'value', parseFloat(value));
+    }
+
+    public registerOnChange(fn: any) {
+        this.fnChange = fn;
+    }
+
+    public registerOnTouched(fn: any) {
+        this.fnTouched = fn;
+    }
+
+    public setDisabledState(isDisabled: boolean) {
+        this.renderer.setProperty(this.elementRef.nativeElement, 'disabled', isDisabled);
+    }
+
+}

projects/ngqp/core/src/lib/query-param.module.ts

@@ -5,6 +5,7 @@ import {
     DefaultControlValueAccessorDirective,
     NgqpSelectOptionDirective,
     NumberControlValueAccessorDirective,
+    RangeControlValueAccessorDirective,
     SelectControlValueAccessorDirective
 } from './accessors/accessors';
 
@@ -15,6 +16,7 @@ const DIRECTIVES: Type<any>[] = [
     // Accessors
     DefaultControlValueAccessorDirective,
     NumberControlValueAccessorDirective,
+    RangeControlValueAccessorDirective,
     SelectControlValueAccessorDirective,
     NgqpSelectOptionDirective,
 ];