Debounce slider inputs

Koopzington · Sep 10, 2024 · cb54e6e · cb54e6e
1 parent 950ecdd
commit cb54e6e
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 0 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,8 @@
 # Changelog
 
+## 2024-09-10
+- Debounce inputs for sliders to improve user experience while entering numbers
+
 ## 2024-08-27
 - Fixed a bug where sliders would pass decimal numbers to the API (e.g. UI shows 6 main characters but sends 5.6785)
 - Updated dependencies

diff --git a/src/Filters.ts b/src/Filters.ts
@@ -870,14 +870,22 @@ class Filters extends EventTarget {
       }
     })
 
+    let debouncer: number
+
     minField.addEventListener('keyup', () => {
+      clearTimeout(debouncer)
+      debouncer = setTimeout(() => {
       container.noUiSlider.set([minField.value, null])
       this.filterChangeCallback()
+      }, 500);
     })
 
     maxField.addEventListener('keyup', () => {
+      clearTimeout(debouncer)
+      debouncer = setTimeout(() => {
       container.noUiSlider.set([null, maxField.value])
       this.filterChangeCallback()
+      }, 500);
     })
   }