diff --git a/src/main/angular/src/app/shared/slider/slider.component.html b/src/main/angular/src/app/shared/slider/slider.component.html
index ccb426e..597adab 100644
--- a/src/main/angular/src/app/shared/slider/slider.component.html
+++ b/src/main/angular/src/app/shared/slider/slider.component.html
@@ -1,4 +1,4 @@
-<div #outer class="outer" (mousedown)="change($event)" (mousemove)="change($event)" (mouseup)="end($event)" [style.background]="gradient()">
-  <div #slider class="slider" [style.left]="left(percent)" [style.border-color]="colorSlider" [class.ghost]="percentMouse !== null"></div>
-  <div class="slider" [style.left]="left(percentMouse === null ? percent : percentMouse)" [style.border-color]="colorSlider"></div>
+<div #outer class="outer" (mousedown)="mouseDown(slider, outer, $event)" (mousemove)="mouseMove(slider, outer, $event)" (mouseup)="mouseUp(slider, outer, $event)" [style.background]="gradient()">
+  <div #slider class="slider" [style.left]="left(slider, percent)" [style.border-color]="colorSlider" [class.ghost]="percentMouse !== null"></div>
+  <div class="slider" [style.left]="left(slider, percentMouse === null ? percent : percentMouse)" [style.border-color]="colorSlider"></div>
 </div>
diff --git a/src/main/angular/src/app/shared/slider/slider.component.ts b/src/main/angular/src/app/shared/slider/slider.component.ts
index 5728fed..7217fbc 100644
--- a/src/main/angular/src/app/shared/slider/slider.component.ts
+++ b/src/main/angular/src/app/shared/slider/slider.component.ts
@@ -1,4 +1,4 @@
-import {Component, ElementRef, EventEmitter, Input, Output, ViewChild} from '@angular/core';
+import {Component, EventEmitter, Input, Output} from '@angular/core';
 
 const RATE_LIMIT_MS = 300;
 
@@ -28,29 +28,34 @@ export class SliderComponent {
   @Output()
   onChange = new EventEmitter<number>();
 
-  @ViewChild('outer')
-  outer!: ElementRef;
-
-  @ViewChild('slider')
-  slider!: ElementRef;
-
   private last: number | null = null;
 
-  protected change($event: MouseEvent) {
+  private drag: boolean = false;
+
+  protected mouseDown(slider: HTMLElement, outer: HTMLElement, $event: MouseEvent) {
     if ($event.buttons !== 1) {
       return;
     }
-    this.apply($event, false);
+    this.drag = true;
+    this.apply(slider, outer, $event, false);
   }
 
-  protected end($event: MouseEvent) {
-    this.apply($event, true);
+  protected mouseMove(slider: HTMLElement, outer: HTMLElement, $event: MouseEvent) {
+    this.apply(slider, outer, $event, false);
+  }
+
+  protected mouseUp(slider: HTMLElement, outer: HTMLElement, $event: MouseEvent) {
+    this.apply(slider, outer, $event, true);
+    this.drag = false;
     this.percentMouse = null;
   }
 
-  private apply($event: MouseEvent, force: boolean) {
-    const sliderHalf = this.slider.nativeElement.offsetWidth / 2;
-    const offsetWidth = this.outer.nativeElement.offsetWidth;
+  private apply(slider: HTMLElement, outer: HTMLElement, $event: MouseEvent, force: boolean) {
+    if (!this.drag) {
+      return;
+    }
+    const sliderHalf = slider.offsetWidth / 2;
+    const offsetWidth = outer.offsetWidth;
     const currentX = $event.clientX;
     this.percentMouse = Math.max(0, Math.min(100, Math.round(100 * (currentX - sliderHalf) / offsetWidth)));
     const now = new Date().getTime();
@@ -65,11 +70,11 @@ export class SliderComponent {
     return `linear-gradient(to right, ${this.color0}, ${this.color1})`;
   }
 
-  left(percent: number): string {
-    if (!this.slider) {
+  left(slider: HTMLElement, percent: number): string {
+    if (!slider) {
       return "0%";
     }
-    return `calc(${percent}% - ${this.slider.nativeElement.offsetWidth / 2}px)`;
+    return `calc(${percent}% - ${slider.offsetWidth / 2}px)`;
   }
 
 }