feat(slider): fix thumb hover timer

IgniteUI · Nov 15, 2021 · 016a855 · 016a855
1 parent a262bdf
commit 016a855
Showing 1 changed file with 9 additions and 7 deletions.
diff --git a/src/components/slider/slider.ts b/src/components/slider/slider.ts
@@ -37,6 +37,7 @@ export default class IgcSliderComponent extends EventEmitterMixin<
   private _value: number | IRangeSliderValue = 0;
   private _hasViewInit = false;
   private _activeThumb: HTMLElement | undefined;
+  private thumbHoverTimer: any;
 
   private get isLTR(): boolean {
     const styles = window.getComputedStyle(this);
@@ -395,6 +396,11 @@ export default class IgcSliderComponent extends EventEmitterMixin<
       return;
     }
 
+    if (this.thumbHoverTimer) {
+      clearTimeout(this.thumbHoverTimer);
+      this.thumbHoverTimer = null;
+    }
+
     this.thumbLabelsVisible = true;
   }
 
@@ -403,7 +409,7 @@ export default class IgcSliderComponent extends EventEmitterMixin<
       return;
     }
 
-    setTimeout(() => {
+    this.thumbHoverTimer = setTimeout(() => {
       this.thumbLabelsVisible = false;
     }, 750);
   }
@@ -650,17 +656,13 @@ export default class IgcSliderComponent extends EventEmitterMixin<
   };
 
   private handleThumbPointerEnter = () => {
-    this.onHoverChange(true);
+    this.showThumbLabels();
   };
 
   private handleThumbPointerLeave = () => {
-    this.onHoverChange(false);
+    this.hideThumbLabels();
   };
 
-  private onHoverChange(state: boolean) {
-    return state ? this.showThumbLabels() : this.hideThumbLabels();
-  }
-
   public incrementValue() {
     if (this.isRange) {
       if (this._activeThumb?.id === 'thumbFrom') {