From 769d7c606fb0b8527ddaa166ca02b4ed93b7f6ee Mon Sep 17 00:00:00 2001
From: Kyle Spearrin <kyle.spearrin@gmail.com>
Date: Mon, 26 Feb 2018 08:47:35 -0500
Subject: [PATCH] use input change events on slider

---
 .../vault/password-generator.component.html   |  2 +-
 src/app/vault/password-generator.component.ts | 30 +++++++------------
 2 files changed, 11 insertions(+), 21 deletions(-)

diff --git a/src/app/vault/password-generator.component.html b/src/app/vault/password-generator.component.html
index 6fc1b3e6..4a4ed438 100644
--- a/src/app/vault/password-generator.component.html
+++ b/src/app/vault/password-generator.component.html
@@ -29,7 +29,7 @@
                             <input id="length" type="number" min="5" max="128" [(ngModel)]="options.length"
                                    (input)="saveOptions()">
                             <input id="lengthRange" type="range" min="5" max="128" step="1"
-                                   [(ngModel)]="options.length">
+                                   [(ngModel)]="options.length" (change)="sliderChanged()" (input)="sliderInput()">
                         </div>
                         <div class="box-content-row box-content-row-checkbox" appBoxRow>
                             <label for="uppercase">A-Z</label>
diff --git a/src/app/vault/password-generator.component.ts b/src/app/vault/password-generator.component.ts
index 7ea03740..2a1a9914 100644
--- a/src/app/vault/password-generator.component.ts
+++ b/src/app/vault/password-generator.component.ts
@@ -41,27 +41,17 @@ export class PasswordGeneratorComponent implements OnInit {
         this.password = this.passwordGenerationService.generatePassword(this.options);
         this.analytics.eventTrack.next({ action: 'Generated Password' });
         await this.passwordGenerationService.addHistory(this.password);
+    }
 
-        const slider = document.querySelector('#lengthRange');
-        if (slider) {
-            // Save password once the slider stop moving.
-            slider.addEventListener('change', async (e) => {
-                e.preventDefault();
-                this.functionWithChangeDetection(() => {
-                    this.saveOptions(false);
-                });
-                await this.passwordGenerationService.addHistory(this.password);
-                this.analytics.eventTrack.next({ action: 'Regenerated Password' });
-            });
-            // Regenerate while slider moving
-            slider.addEventListener('input', (e) => {
-                e.preventDefault();
-                this.functionWithChangeDetection(() => {
-                    this.normalizeOptions();
-                    this.password = this.passwordGenerationService.generatePassword(this.options);
-                });
-            });
-        }
+    async sliderChanged() {
+        this.saveOptions(false);
+        await this.passwordGenerationService.addHistory(this.password);
+        this.analytics.eventTrack.next({ action: 'Regenerated Password' });
+    }
+
+    async sliderInput() {
+        this.normalizeOptions();
+        this.password = this.passwordGenerationService.generatePassword(this.options);
     }
 
     async saveOptions(regenerate: boolean = true) {