Merge pull request #5827 from IgniteUI/slider-thumb-position-master

fix slider thumb position and focus

Author: kdinev

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

@@ -551,16 +551,16 @@ describe('IgxSlider', () => {
         });
 
         it('labels should show/hide on pointer up/down', async() => {
-            const sliderEl = fixture.debugElement.query(By.css(SLIDER_CLASS)).nativeElement;
-            sliderEl.dispatchEvent( new PointerEvent('pointerdown', { pointerId: 1 }));
+            const sliderEl = fixture.debugElement.query(By.css(SLIDER_CLASS));
+            sliderEl.nativeElement.dispatchEvent( new PointerEvent('pointerdown', { pointerId: 1 }));
             await wait(50);
             fixture.detectChanges();
 
             expect(sliderEl).toBeDefined();
-            let activeThumb = fixture.debugElement.query(By.css('.igx-slider__thumb-to--active'));
+            let activeThumb = sliderEl.query(By.css('.igx-slider__thumb-to--active'));
             expect(activeThumb).not.toBeNull();
 
-            sliderEl.dispatchEvent( new PointerEvent('pointerup'));
+            sliderEl.nativeElement.dispatchEvent( new PointerEvent('pointerup', { pointerId: 1 }));
             await wait(slider.thumbLabelVisibilityDuration + 10);
             fixture.detectChanges();
 
@@ -569,26 +569,26 @@ describe('IgxSlider', () => {
         });
 
         it('should be able to change thumbLabelVisibilityDuration', async() => {
-            const sliderEl = fixture.debugElement.query(By.css(SLIDER_CLASS)).nativeElement;
+            const sliderEl = fixture.debugElement.query(By.css(SLIDER_CLASS));
             slider.thumbLabelVisibilityDuration = 1000;
-            sliderEl.dispatchEvent( new PointerEvent('pointerdown', { pointerId: 1 }));
+            sliderEl.nativeElement.dispatchEvent( new PointerEvent('pointerdown', { pointerId: 1 }));
             await wait(50);
             fixture.detectChanges();
 
             expect(sliderEl).toBeDefined();
-            let activeThumb = fixture.debugElement.query(By.css('.igx-slider__thumb-to--active'));
+            let activeThumb = sliderEl.query(By.css('.igx-slider__thumb-to--active'));
             expect(activeThumb).not.toBeNull();
 
-            sliderEl.dispatchEvent( new PointerEvent('pointerup'));
+            sliderEl.nativeElement.dispatchEvent( new PointerEvent('pointerup', { pointerId: 1 }));
             await wait(750);
             fixture.detectChanges();
 
-            activeThumb = fixture.debugElement.query(By.css('.igx-slider__thumb-to--active'));
+            activeThumb = sliderEl.query(By.css('.igx-slider__thumb-to--active'));
             expect(activeThumb).not.toBeNull();
 
             await wait(300);
             fixture.detectChanges();
-            activeThumb = fixture.debugElement.query(By.css('.igx-slider__thumb-to--active'));
+            activeThumb = sliderEl.query(By.css('.igx-slider__thumb-to--active'));
             expect(activeThumb).toBeNull();
         });
 
@@ -830,7 +830,7 @@ describe('IgxSlider', () => {
             let activeThumb = fixture.debugElement.query(By.css('.igx-slider__thumb-from--active'));
             expect(activeThumb).not.toBeNull();
 
-            sliderEl.dispatchEvent( new PointerEvent('pointerup'));
+            sliderEl.dispatchEvent( new PointerEvent('pointerup', { pointerId: 1}));
             await wait(slider.thumbLabelVisibilityDuration + 10);
             fixture.detectChanges();
 
@@ -849,7 +849,7 @@ describe('IgxSlider', () => {
             let activeThumb = fixture.debugElement.query(By.css('.igx-slider__thumb-from--active'));
             expect(activeThumb).not.toBeNull();
 
-            sliderEl.dispatchEvent( new PointerEvent('pointerup'));
+            sliderEl.dispatchEvent( new PointerEvent('pointerup', { pointerId: 1}));
             await wait(750);
             fixture.detectChanges();
 

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

@@ -5,12 +5,12 @@ import {
     ViewChild,
     TemplateRef,
     ContentChild,
-    AfterContentInit,
     OnDestroy,
     HostListener,
     ViewChildren,
     QueryList,
-    ChangeDetectorRef
+    ChangeDetectorRef,
+    AfterContentChecked
 } from '@angular/core';
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { EditorProvider } from '../core/edit-provider';
@@ -63,7 +63,7 @@ export class IgxSliderComponent implements
     EditorProvider,
     OnInit,
     AfterViewInit,
-    AfterContentInit,
+    AfterContentChecked,
     OnDestroy {
 
     // Limit handle travel zone
@@ -657,7 +657,7 @@ export class IgxSliderComponent implements
      * @hidden
      */
     @HostListener('pointerdown', ['$event'])
-    public onPointerDown($event) {
+    public onPointerDown($event: PointerEvent) {
         this.findClosestThumb($event);
 
         if (!this.thumbTo.isActive && this.thumbFrom === undefined) {
@@ -668,6 +668,7 @@ export class IgxSliderComponent implements
         activeThumb.nativeElement.setPointerCapture($event.pointerId);
         this.showSliderIndicators();
 
+        $event.preventDefault();
     }
 
 
@@ -680,6 +681,9 @@ export class IgxSliderComponent implements
             return;
         }
 
+        const activeThumb = this.thumbTo.isActive ? this.thumbTo : this.thumbTo;
+        activeThumb.nativeElement.releasePointerCapture($event.pointerId);
+
         this.hideSliderIndicators();
     }
 
@@ -709,14 +713,6 @@ export class IgxSliderComponent implements
         this.hideSliderIndicators();
     }
 
-    /**
-     * @hidden
-     */
-    @HostListener('tap', ['$event'])
-    public onTapListener($event) {
-        this.onTap($event);
-    }
-
     /**
      *Returns whether the `IgxSliderComponent` type is RANGE.
      *```typescript
@@ -874,7 +870,7 @@ export class IgxSliderComponent implements
     /**
      * @hidden
      */
-    public ngAfterContentInit() {
+    public ngAfterContentChecked() {
         // Calculates the distance between every step in pixels.
         this.stepDistance = this.calculateStepDistance();
     }
@@ -920,13 +916,6 @@ export class IgxSliderComponent implements
         return this.isRange ? this.thumbFrom.nativeElement : this.thumbTo.nativeElement;
     }
 
-    /**
-     *
-     * @hidden
-     */
-    public onTap($event) {
-        this.update($event.srcEvent.clientX);
-    }
     /**
      *
      * @hidden
@@ -1006,9 +995,9 @@ export class IgxSliderComponent implements
         return value;
     }
 
-    private findClosestThumb(event) {
+    private findClosestThumb(event: PointerEvent) {
         if (this.isRange) {
-            this.closestHandle(event.clientX);
+            this.closestHandle(event);
         } else {
             this.thumbTo.nativeElement.focus();
         }
@@ -1086,15 +1075,19 @@ export class IgxSliderComponent implements
         this.updateTrack();
     }
 
-    private closestHandle(mouseX) {
+    private closestHandle(event: PointerEvent) {
         const fromOffset = this.thumbFrom.nativeElement.offsetLeft + this.thumbFrom.nativeElement.offsetWidth / 2;
         const toOffset = this.thumbTo.nativeElement.offsetLeft + this.thumbTo.nativeElement.offsetWidth / 2;
-        const xPointer = mouseX - this._el.nativeElement.getBoundingClientRect().left;
+        const xPointer = event.clientX - this._el.nativeElement.getBoundingClientRect().left;
         const match = this.closestTo(xPointer, [fromOffset, toOffset]);
 
-        if (match === fromOffset) {
+        if (fromOffset === toOffset && toOffset < xPointer) {
+            this.thumbTo.nativeElement.focus();
+        } else if (fromOffset === toOffset && toOffset > xPointer ) {
+            this.thumbFrom.nativeElement.focus();
+        } else if (match === fromOffset) {
             this.thumbFrom.nativeElement.focus();
-        } else if (match === toOffset) {
+        } else {
             this.thumbTo.nativeElement.focus();
         }
     }