add debound time

src/app/shared/component/slider-range/slider-range.component.ts

   Output,
 } from '@angular/core';
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+import {debounceTime, Subject} from 'rxjs';
 
 @Component({
   selector: 'app-slider-range',
   @Input() max: number = 300;
   @Input() icon: string = '';
   @Output() valueChange = new EventEmitter<number>();
-
+  @Input() disable: boolean = false;
   onChange = (value: number) => {};
   onTouched = () => {};
+  private valueChangeSubject = new Subject<number>();
 
-  constructor() {}
+  constructor() {
+    this.valueChangeSubject.pipe(debounceTime(500)).subscribe(value => {
+      this.valueChange.emit(value);
+    });
+  }
 
   writeValue(value: number): void {
     this.value = value;
     this.value = event.target.value;
     this.onChange(this.value);
     this.onTouched();
-    this.valueChange.emit(this.value);
+    this.valueChangeSubject.next(this.value);
   }
 
   onSliderChangeBackground() {
       this.value += 10;
       this.onChange(this.value);
       this.onTouched();
-      this.valueChange.emit(this.value);
+      this.valueChangeSubject.next(this.value);
+
     }
   }
 
       this.value -= 10;
       this.onChange(this.value);
       this.onTouched();
-      this.valueChange.emit(this.value);
+      this.valueChangeSubject.next(this.value);
     }
   }
 }