Merge pull request #6412 from IgniteUI/slider-valueChanged

feat(slider): expose onValueChanged event

Author: kdinev

CHANGELOG.md

@@ -68,6 +68,7 @@ All notable changes for each version of this project will be documented in this
     - `tickLabelsOrientation` input was added. Allows you to change the rotation of all tick labels from horizontal to vertical(toptobottom, bottomtotop).
     - `igxSliderTickLabel` directive has been introduced. Allows you to set a custom template for all tick labels.
     - `isContinuous` - input has been deleted. The option is not supported anymore.
+    - `onValueChanged` - new output has been exposed. This event is emitted at the end of every slide interaction. 
 
 - `IgxCarousel`:
     - `keyboardSupport` input is added, which can be used to enable and disable keyboard navigation

projects/igniteui-angular/src/lib/slider/slider.common.ts

@@ -48,7 +48,7 @@ export interface IRangeSliderValue {
     upper: number;
 }
 
-export interface ISliderValueChangeEventArgs extends IBaseEventArgs {
+export interface ISliderValueChangeEventArgs {
     oldValue: number | IRangeSliderValue;
     value: number | IRangeSliderValue;
 }

projects/igniteui-angular/src/lib/slider/slider.component.spec.ts

@@ -1326,6 +1326,34 @@ describe('IgxSlider', () => {
             expect(slider.lowerBound).toEqual(expectedMinVal);
             expect(slider.upperBound).toEqual(expectedMaxVal);
         });
+
+        it('Should emit onValueChanged only when stop interacting with the slider', () => {
+            const fix = TestBed.createComponent(SliderTestComponent);
+            fix.detectChanges();
+
+            const instance = fix.componentInstance;
+            const spyOnValueChanged = spyOn<any>(instance.slider.onValueChanged, 'emit').and.callThrough();
+            const sliderEl = fix.debugElement.query(By.css(SLIDER_CLASS));
+            sliderEl.triggerEventHandler('focus', null);
+            fix.detectChanges();
+
+            sliderEl.triggerEventHandler('pointerdown', {pointerId: 1, clientX: 200, preventDefault: <any>( ( e: any ) => {  })});
+            fix.detectChanges();
+            let currentValue = instance.slider.value;
+            expect(spyOnValueChanged).toHaveBeenCalledTimes(0);
+            expect(currentValue).toBeGreaterThan(0);
+
+            sliderEl.triggerEventHandler('pointerdown', {pointerId: 1, clientX: 300, preventDefault: <any>( ( e: any ) => {  })});
+            fix.detectChanges();
+            expect(spyOnValueChanged).toHaveBeenCalledTimes(0);
+            expect(instance.slider.value).toBeGreaterThan(currentValue as number);
+
+            currentValue = instance.slider.value;
+            sliderEl.triggerEventHandler('pointerup', {pointerId: 1, preventDefault: <any>( ( e: any ) => {  })});
+            fix.detectChanges();
+            expect(spyOnValueChanged).toHaveBeenCalledTimes(1);
+            expect(instance.slider.value).toEqual(currentValue);
+        });
     });
 
     describe('igxSlider ticks', () => {

projects/igniteui-angular/src/lib/slider/slider.component.ts

@@ -740,7 +740,7 @@ export class IgxSliderComponent implements
     }
 
     /**
-     * This event is emitted when user has stopped interacting the thumb and value is changed.
+     * This event is emitted every time the value is changed.
      * ```typescript
      * public change(event){
      *    alert("The value has been changed!");
@@ -753,6 +753,20 @@ export class IgxSliderComponent implements
     @Output()
     public onValueChange = new EventEmitter<ISliderValueChangeEventArgs>();
 
+    /**
+     * This event is emitted at the end of every slide interaction.
+     * ```typescript
+     * public change(event){
+     *    alert("The value has been changed!");
+     *}
+     * ```
+     * ```html
+     * <igx-slider (onValueChanged)="change($event)" #slider [(ngModel)]="task.percentCompleted" [step]="5">
+     * ```
+     */
+    @Output()
+    public onValueChanged = new EventEmitter<number | IRangeSliderValue>();
+
 
     constructor(
         private renderer: Renderer2,
@@ -782,7 +796,7 @@ export class IgxSliderComponent implements
      * @hidden
      */
     @HostListener('pointerup', ['$event'])
-    public onPointerUp($event) {
+    public onPointerUp($event: PointerEvent) {
         if (!this.thumbTo.isActive && this.thumbFrom === undefined) {
             return;
         }
@@ -791,6 +805,7 @@ export class IgxSliderComponent implements
         activeThumb.nativeElement.releasePointerCapture($event.pointerId);
 
         this.hideSliderIndicators();
+        this.onValueChanged.emit(this.value);
     }
 
     /**
@@ -809,22 +824,6 @@ export class IgxSliderComponent implements
         this.update($event.srcEvent.clientX);
     }
 
-    /**
-     * @hidden
-     */
-    @HostListener('panstart')
-    public onPanStart() {
-        this.showSliderIndicators();
-    }
-
-    /**
-     * @hidden
-     */
-    @HostListener('panend')
-    public onPanEnd() {
-        this.hideSliderIndicators();
-    }
-
     /**
      *Returns whether the `IgxSliderComponent` type is RANGE.
      *```typescript