Add timeout to range

temnov98 · Dec 10, 2023 · 470aa7b · 470aa7b
1 parent 3ff2348
commit 470aa7b
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 3 deletions.
diff --git a/examples/tapme/js/pages/chart/components/chart.range.component.js b/examples/tapme/js/pages/chart/components/chart.range.component.js
@@ -7,6 +7,7 @@ class ChartRangeComponent extends AutoSubscribeComponent {
                     max: chartModel.daysCount - 1,
                     minValue: chartModel.min,
                     maxValue: chartModel.max,
+                    timeout: 100,
                     onChange: ({ min, max }) => chartModel.setInterval({ min, max }),
                 })}
             </div>

diff --git a/examples/tapme/js/shared/components/range.component.js b/examples/tapme/js/shared/components/range.component.js
@@ -4,9 +4,10 @@ class RangeComponent extends Component {
      * @param {number} max
      * @param {number} minValue
      * @param {number} maxValue
+     * @param {number} [timeout]
      * @param {(params: { min: number; max: number }) => void} onChange
      */
-    constructor({ min, max, minValue, maxValue, onChange }) {
+    constructor({ min, max, minValue, maxValue, timeout, onChange }) {
         super();
 
         this.min = min;
@@ -19,6 +20,9 @@ class RangeComponent extends Component {
         this.maxId = getId();
 
         this.onChange = onChange;
+
+        this.hasTimeout = false;
+        this.timeout = timeout;
     }
 
     get minElement() {
@@ -48,6 +52,20 @@ class RangeComponent extends Component {
         this.callOnChange();
     }
 
+    onMove() {
+        if (this.hasTimeout || !this.timeout) {
+            return;
+        }
+
+        this.hasTimeout = true;
+
+        setTimeout(() => {
+            this.hasTimeout = false;
+
+            this.callOnChange();
+        }, this.timeout);
+    }
+
     toHtml() {
         return t`
             <div>
@@ -59,8 +77,8 @@ class RangeComponent extends Component {
                         max="${this.max}" 
                         value="${this.minValue}" 
                         class="range-component__slider"
+                        oninput="${() => this.onMove()}"
                         onchange="${() => this.onMinChange()}"
-                        title="${this.min}"
                     >
                     <input
                         id="${this.maxId}"
@@ -69,8 +87,8 @@ class RangeComponent extends Component {
                         max="${this.max}" 
                         value="${this.maxValue}" 
                         class="range-component__slider" 
+                        oninput="${() => this.onMove()}"
                         onchange="${() => this.onMaxChange()}"
-                        title="${this.max}"
                     >
                 </div>
             </div>