diff --git a/projects/igniteui-angular/src/lib/core/utils.ts b/projects/igniteui-angular/src/lib/core/utils.ts
index 3e6aa4f65ca..1dca59ee17e 100644
--- a/projects/igniteui-angular/src/lib/core/utils.ts
+++ b/projects/igniteui-angular/src/lib/core/utils.ts
@@ -329,6 +329,8 @@ export const SUPPORTED_KEYS = new Set([...Array.from(NAVIGATION_KEYS), 'tab', 'e
  * @internal
  *
  * Creates a new ResizeObserver on `target` and returns it as an Observable.
+ * Run the resizeObservable outside angular zone, because it patches the MutationObserver which causes an infinite loop.
+ * Related issue: https://github.com/angular/angular/issues/31712
  */
 export function resizeObservable(target: HTMLElement): Observable<ResizeObserverEntry[]> {
     return new Observable((observer) => {
diff --git a/projects/igniteui-angular/src/lib/slider/slider.component.ts b/projects/igniteui-angular/src/lib/slider/slider.component.ts
index 6ee097aab1c..600e5ac76ca 100644
--- a/projects/igniteui-angular/src/lib/slider/slider.component.ts
+++ b/projects/igniteui-angular/src/lib/slider/slider.component.ts
@@ -10,7 +10,8 @@ import {
     ViewChildren,
     QueryList,
     ChangeDetectorRef,
-    OnChanges
+    OnChanges,
+    NgZone
 } from '@angular/core';
 import { ControlValueAccessor, NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
 import { EditorProvider } from '../core/edit-provider';
@@ -771,7 +772,8 @@ export class IgxSliderComponent implements
     constructor(
         private renderer: Renderer2,
         private _el: ElementRef,
-        private _cdr: ChangeDetectorRef) { }
+        private _cdr: ChangeDetectorRef,
+        private _ngZone: NgZone) { }
 
     /**
      * @hidden
@@ -1005,11 +1007,13 @@ export class IgxSliderComponent implements
             this.positionHandler(null, labelFrom, this.lowerValue);
         });
 
-        resizeObservable(this._el.nativeElement).pipe(
-            throttleTime(40),
-            takeUntil(this._destroyer$)).subscribe(() => {
-                this.stepDistance = this.calculateStepDistance();
-            });
+        this._ngZone.runOutsideAngular(() => {
+            resizeObservable(this._el.nativeElement).pipe(
+                throttleTime(40),
+                takeUntil(this._destroyer$)).subscribe(() => this._ngZone.run( () => {
+                    this.stepDistance = this.calculateStepDistance();
+                }));
+        });
     }
 
     /**