diff --git a/modules/components/src/components/flat-slider/flat-slider.component.html b/modules/components/src/components/flat-slider/flat-slider.component.html
index 99182ab..05f997f 100644
--- a/modules/components/src/components/flat-slider/flat-slider.component.html
+++ b/modules/components/src/components/flat-slider/flat-slider.component.html
@@ -1,8 +1,6 @@
 
 <div class="container" #container 
 [ngStyle]="containerStyle" 
-(mousewheel)="mouseWheel($event)"
-(mousedown)="mousedown($event)"
 >
   <div class="groove" [ngStyle]="grooveStyle"></div>
   <div class="groove-filling" [ngStyle]="grooveFillingStyle"></div>
diff --git a/modules/components/src/components/flat-slider/flat-slider.component.ts b/modules/components/src/components/flat-slider/flat-slider.component.ts
index 27dbe97..7407be8 100644
--- a/modules/components/src/components/flat-slider/flat-slider.component.ts
+++ b/modules/components/src/components/flat-slider/flat-slider.component.ts
@@ -139,9 +139,6 @@ export class FlatSliderComponent implements OnInit, OnDestroy {
   }
 
   ngOnInit () {
-    window.addEventListener('mousemove', this.mousemove, true)
-
-    window.addEventListener('mouseup', this.mouseup, true)
   }
 
   public clampValue (value: number) {
@@ -200,6 +197,7 @@ export class FlatSliderComponent implements OnInit, OnDestroy {
     return value
   }
 
+  @HostListener('mousedown', [ '$event' ])
   mousedown (event: MouseEvent) {
     if (this.enabled) {
       this.dragging = true
@@ -208,6 +206,7 @@ export class FlatSliderComponent implements OnInit, OnDestroy {
     }
   }
 
+  @HostListener('mousemove', [ '$event' ])
   mousemove = (event: MouseEvent) => {
     if (this.enabled && this.dragging) {
       this.value = this.getValueFromMouseEvent(event)
@@ -215,6 +214,29 @@ export class FlatSliderComponent implements OnInit, OnDestroy {
     }
   }
 
+  @HostListener('mouseleave', [ '$event' ])
+  mouseleave () {
+    if (this.dragging) {
+      this.attachWindowEvents()
+    }
+  }
+
+  @HostListener('mouseup', [ '$event' ])
+  mouseup = (event: MouseEvent) => {
+    this.dragging = false
+    this.dettachWindowEvents()
+  }
+
+  private attachWindowEvents () {
+    window.addEventListener('mousemove', this.mousemove, true)
+    window.addEventListener('mouseup', this.mouseup, true)
+  }
+
+  private dettachWindowEvents () {
+    window.removeEventListener('mousemove', this.mousemove, true)
+    window.removeEventListener('mouseup', this.mouseup, true)
+  }
+
   public doubleclickTimeout?: number
   doubleclick () {
     if (this.enabled && this.doubleClickToAnimateToMiddle) {
@@ -245,10 +267,6 @@ export class FlatSliderComponent implements OnInit, OnDestroy {
     }
   }
 
-  mouseup = (event: MouseEvent) => {
-    this.dragging = false
-  }
-
   get progress () {
     return this.getProgress(this.value)
   }
@@ -396,7 +414,6 @@ export class FlatSliderComponent implements OnInit, OnDestroy {
   }
 
   ngOnDestroy () {
-    window.removeEventListener('mousemove', this.mousemove, true)
-    window.removeEventListener('mouseup', this.mouseup, true)
+    this.dettachWindowEvents()
   }
 }
diff --git a/modules/components/src/components/knob/knob.component.html b/modules/components/src/components/knob/knob.component.html
index dea7aa2..677660c 100644
--- a/modules/components/src/components/knob/knob.component.html
+++ b/modules/components/src/components/knob/knob.component.html
@@ -1,5 +1,4 @@
-<div #container class="container" (dblclick)="doubleclick()"
-  (mousedown)="mousedown($event)" (mouseup)="mouseup($event)">
+<div #container class="container" (dblclick)="doubleclick()">
 
   <!-- Large -->
   <div *ngIf="size === 'large'" class="knob large">
diff --git a/modules/components/src/components/knob/knob.component.ts b/modules/components/src/components/knob/knob.component.ts
index f0d79c4..36d3077 100644
--- a/modules/components/src/components/knob/knob.component.ts
+++ b/modules/components/src/components/knob/knob.component.ts
@@ -90,8 +90,6 @@ export class KnobComponent implements OnInit, OnDestroy {
 
   async ngOnInit () {
     this.container = this.containerRef.nativeElement
-    window.addEventListener('mousemove', this.mousemove, true)
-    window.addEventListener('mouseup', this.mouseup, true)
   }
 
   private lastWheelEvent = new Date().getTime()
@@ -108,6 +106,7 @@ export class KnobComponent implements OnInit, OnDestroy {
     }
   }
 
+  @HostListener('mousedown', [ '$event' ])
   mousedown (event: MouseEvent) {
     if (this.enabled) {
       this.continueAnimation = false
@@ -130,6 +129,7 @@ export class KnobComponent implements OnInit, OnDestroy {
     }
   }
 
+  @HostListener('mousemove', [ '$event' ])
   mousemove = (event: MouseEvent) => {
     if (this.enabled) {
       if (this.setDraggingFalseTimeout) {
@@ -147,8 +147,27 @@ export class KnobComponent implements OnInit, OnDestroy {
     }
   }
 
+  @HostListener('mouseleave', [ '$event' ])
+  mouseleave () {
+    if (this.dragging) {
+      this.attachWindowEvents()
+    }
+  }
+
+  @HostListener('mouseup', [ '$event' ])
   mouseup = (event: MouseEvent) => {
     this.dragging = false
+    this.dettachWindowEvents()
+  }
+
+  private attachWindowEvents () {
+    window.addEventListener('mousemove', this.mousemove, true)
+    window.addEventListener('mouseup', this.mouseup, true)
+  }
+
+  private dettachWindowEvents () {
+    window.removeEventListener('mousemove', this.mousemove, true)
+    window.removeEventListener('mouseup', this.mouseup, true)
   }
 
   doubleclick () {
@@ -239,7 +258,6 @@ export class KnobComponent implements OnInit, OnDestroy {
   }
 
   ngOnDestroy () {
-    window.removeEventListener('mousemove', this.mousemove, true)
-    window.removeEventListener('mouseup', this.mouseup, true)
+    this.dettachWindowEvents()
   }
 }
diff --git a/modules/components/src/components/skeuomorph-slider/skeuomorph-slider.component.ts b/modules/components/src/components/skeuomorph-slider/skeuomorph-slider.component.ts
index d6ccbdb..3ff91fe 100644
--- a/modules/components/src/components/skeuomorph-slider/skeuomorph-slider.component.ts
+++ b/modules/components/src/components/skeuomorph-slider/skeuomorph-slider.component.ts
@@ -114,7 +114,7 @@ export class SkeuomorphSliderComponent implements OnInit, OnDestroy {
   }
 
   @HostListener('mousedown', [ '$event' ])
-  onMouseDown (event: MouseEvent) {
+  mousedown (event: MouseEvent) {
     if (this.enabled) {
       this.dragging = true
       if (!this.doubleclickTimeout) {
@@ -127,6 +127,7 @@ export class SkeuomorphSliderComponent implements OnInit, OnDestroy {
     }
   }
 
+  @HostListener('mousemove', [ '$event' ])
   mousemove = (event: MouseEvent) => {
     if (this.enabled && this.dragging) {
       this.value = this.getValueFromMouseEvent(event)
@@ -134,8 +135,27 @@ export class SkeuomorphSliderComponent implements OnInit, OnDestroy {
     }
   }
 
+  @HostListener('mouseleave', [ '$event' ])
+  mouseleave () {
+    if (this.dragging) {
+      this.attachWindowEvents()
+    }
+  }
+
+  @HostListener('mouseup', [ '$event' ])
   mouseup = (event: MouseEvent) => {
     this.dragging = false
+    this.dettachWindowEvents()
+  }
+
+  private attachWindowEvents () {
+    window.addEventListener('mousemove', this.mousemove, true)
+    window.addEventListener('mouseup', this.mouseup, true)
+  }
+
+  private dettachWindowEvents () {
+    window.removeEventListener('mousemove', this.mousemove, true)
+    window.removeEventListener('mouseup', this.mouseup, true)
   }
 
   doubleclick () {
@@ -157,9 +177,6 @@ export class SkeuomorphSliderComponent implements OnInit, OnDestroy {
       this.drawNotches()
       setTimeout(() => this.drawNotches())
     }
-
-    window.addEventListener('mousemove', this.mousemove, true)
-    window.addEventListener('mouseup', this.mouseup, true)
   }
 
   async animateSlider (from: number, to: number) {
@@ -205,7 +222,6 @@ export class SkeuomorphSliderComponent implements OnInit, OnDestroy {
   }
 
   ngOnDestroy () {
-    window.removeEventListener('mousemove', this.mousemove, true)
-    window.removeEventListener('mouseup', this.mouseup, true)
+    this.dettachWindowEvents()
   }
 }