igniteui-angular 21.2.0-rc.0 → 21.2.0-rc.2

package/fesm2022/igniteui-angular-slider.mjs

@@ -3,7 +3,7 @@ import { Directive, inject, ElementRef, booleanAttribute, HostBinding, Input, Co
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import { Subject, noop, fromEvent, interval, animationFrameScheduler, timer, merge } from 'rxjs';
 import { takeUntil, throttleTime, throttle } from 'rxjs/operators';
-import { ɵIgxDirectionality as _IgxDirectionality, resizeObservable } from 'igniteui-angular/core';
+import { isLeftToRight, resizeObservable } from 'igniteui-angular/core';
 import { NgClass, NgTemplateOutlet } from '@angular/common';
 
 /**
@@ -18,10 +18,10 @@ import { NgClass, NgTemplateOutlet } from '@angular/common';
  * @context {@link IgxSliderComponent.context}
  */
 class IgxThumbFromTemplateDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: IgxThumbFromTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.6", type: IgxThumbFromTemplateDirective, isStandalone: true, selector: "[igxSliderThumbFrom]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: IgxThumbFromTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: IgxThumbFromTemplateDirective, isStandalone: true, selector: "[igxSliderThumbFrom]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: IgxThumbFromTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: IgxThumbFromTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxSliderThumbFrom]',
@@ -40,10 +40,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImpor
  * @context {@link IgxSliderComponent.context}
  */
 class IgxThumbToTemplateDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: IgxThumbToTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.6", type: IgxThumbToTemplateDirective, isStandalone: true, selector: "[igxSliderThumbTo]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: IgxThumbToTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: IgxThumbToTemplateDirective, isStandalone: true, selector: "[igxSliderThumbTo]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: IgxThumbToTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: IgxThumbToTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxSliderThumbTo]',
@@ -56,10 +56,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImpor
  * @context {@link IgxTicksComponent.context}
  */
 class IgxTickLabelTemplateDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: IgxTickLabelTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.6", type: IgxTickLabelTemplateDirective, isStandalone: true, selector: "[igxSliderTickLabel]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: IgxTickLabelTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: IgxTickLabelTemplateDirective, isStandalone: true, selector: "[igxSliderTickLabel]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: IgxTickLabelTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: IgxTickLabelTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[igxSliderTickLabel]',
@@ -142,10 +142,10 @@ class IgxThumbLabelComponent {
             this._active = val;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: IgxThumbLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "21.2.6", type: IgxThumbLabelComponent, isStandalone: true, selector: "igx-thumb-label", inputs: { value: "value", templateRef: "templateRef", context: "context", type: "type", continuous: ["continuous", "continuous", booleanAttribute], deactiveState: ["deactiveState", "deactiveState", booleanAttribute], thumb: "thumb" }, host: { properties: { "class.igx-slider-thumb-label-from": "this.thumbFromClass", "class.igx-slider-thumb-label-to": "this.thumbToClass", "class.igx-slider-thumb-label-from--active": "this.thumbFromActiveClass", "class.igx-slider-thumb-label-to--active": "this.thumbToActiveClass", "class.igx-slider-thumb-label-from--pressed": "this.labelFromPressedClass", "class.igx-slider-thumb-label-to--pressed": "this.labelToPressedClass" } }, ngImport: i0, template: "<div [ngClass]=\"getLabelClass\">\n    <ng-container *ngTemplateOutlet=\"templateRef ? templateRef : thumbFromDefaultTemplate; context: context\"></ng-container>\n</div>\n\n<ng-template #thumbFromDefaultTemplate>\n    {{ value }}\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: IgxThumbLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "21.2.9", type: IgxThumbLabelComponent, isStandalone: true, selector: "igx-thumb-label", inputs: { value: "value", templateRef: "templateRef", context: "context", type: "type", continuous: ["continuous", "continuous", booleanAttribute], deactiveState: ["deactiveState", "deactiveState", booleanAttribute], thumb: "thumb" }, host: { properties: { "class.igx-slider-thumb-label-from": "this.thumbFromClass", "class.igx-slider-thumb-label-to": "this.thumbToClass", "class.igx-slider-thumb-label-from--active": "this.thumbFromActiveClass", "class.igx-slider-thumb-label-to--active": "this.thumbToActiveClass", "class.igx-slider-thumb-label-from--pressed": "this.labelFromPressedClass", "class.igx-slider-thumb-label-to--pressed": "this.labelToPressedClass" } }, ngImport: i0, template: "<div [ngClass]=\"getLabelClass\">\n    <ng-container *ngTemplateOutlet=\"templateRef ? templateRef : thumbFromDefaultTemplate; context: context\"></ng-container>\n</div>\n\n<ng-template #thumbFromDefaultTemplate>\n    {{ value }}\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: IgxThumbLabelComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: IgxThumbLabelComponent, decorators: [{
             type: Component,
             args: [{ selector: 'igx-thumb-label', imports: [NgClass, NgTemplateOutlet], template: "<div [ngClass]=\"getLabelClass\">\n    <ng-container *ngTemplateOutlet=\"templateRef ? templateRef : thumbFromDefaultTemplate; context: context\"></ng-container>\n</div>\n\n<ng-template #thumbFromDefaultTemplate>\n    {{ value }}\n</ng-template>\n" }]
         }], propDecorators: { value: [{
@@ -190,7 +190,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImpor
 class IgxSliderThumbComponent {
     constructor() {
         this._elementRef = inject(ElementRef);
-        this._dir = inject(_IgxDirectionality);
         this.thumbValueChange = new EventEmitter();
         this.thumbChange = new EventEmitter();
         this.thumbBlur = new EventEmitter();
@@ -283,12 +282,13 @@ class IgxSliderThumbComponent {
             return;
         }
         let increment = 0;
+        const isRTL = !isLeftToRight(this._elementRef.nativeElement);
         const stepWithDir = (rtl) => rtl ? this.step * -1 : this.step;
         if (event.key.endsWith('Left')) {
-            increment = stepWithDir(!this._dir.rtl);
+            increment = stepWithDir(!isRTL);
         }
         else if (event.key.endsWith('Right')) {
-            increment = stepWithDir(this._dir.rtl);
+            increment = stepWithDir(isRTL);
         }
         else {
             return;
@@ -340,9 +340,11 @@ class IgxSliderThumbComponent {
         }
     }
     calculateTrackUpdate(mouseX) {
-        const scaleX = this._dir.rtl ? this.thumbPositionX - mouseX : mouseX - this.thumbPositionX;
+        const scaleX = !isLeftToRight(this._elementRef.nativeElement)
+            ? this.thumbPositionX - mouseX
+            : mouseX - this.thumbPositionX;
         const stepDistanceCenter = this.stepDistance / 2;
-        // If the thumb scale range (slider update) is less thàn a half step,
+        // If the thumb scale range (slider update) is less than a half step,
         // the position stays the same.
         const scaleXPositive = Math.abs(scaleX);
         if (scaleXPositive < stepDistanceCenter) {
@@ -362,10 +364,10 @@ class IgxSliderThumbComponent {
             this._isActive = visible;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: IgxSliderThumbComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "21.2.6", type: IgxSliderThumbComponent, isStandalone: true, selector: "igx-thumb", inputs: { value: "value", continuous: ["continuous", "continuous", booleanAttribute], thumbLabelVisibilityDuration: "thumbLabelVisibilityDuration", disabled: ["disabled", "disabled", booleanAttribute], onPan: "onPan", stepDistance: "stepDistance", step: "step", templateRef: "templateRef", context: "context", type: "type", deactiveState: ["deactiveState", "deactiveState", booleanAttribute], min: "min", max: "max", labels: "labels" }, outputs: { thumbValueChange: "thumbValueChange", thumbChange: "thumbChange", thumbBlur: "thumbBlur", hoverChange: "hoverChange" }, host: { listeners: { "pointerenter": "onPointerEnter()", "pointerleave": "onPointerLeave()", "keyup": "onKeyUp($event)", "keydown": "onKeyDown($event)", "blur": "onBlur()", "focus": "onFocusListener()" }, properties: { "attr.tabindex": "this.tabindex", "attr.role": "this.role", "attr.aria-valuenow": "this.ariaValueNow", "attr.aria-valuemin": "this.ariaValueMin", "attr.aria-valuemax": "this.ariaValueMax", "attr.aria-valuetext": "this.ariaValueText", "attr.aria-label": "this.ariaLabelAttr", "attr.aria-orientation": "this.ariaOrientation", "attr.aria-disabled": "this.ariaDisabled", "attr.z-index": "this.zIndex", "class.igx-slider-thumb-to--focused": "this.focused", "class.igx-slider-thumb-from": "this.thumbFromClass", "class.igx-slider-thumb-to": "this.thumbToClass", "class.igx-slider-thumb-from--active": "this.thumbFromActiveClass", "class.igx-slider-thumb-to--active": "this.thumbToActiveClass", "class.igx-slider-thumb-from--disabled": "this.thumbFromDisabledClass", "class.igx-slider-thumb-to--disabled": "this.thumbToDisabledClass", "class.igx-slider-thumb-from--pressed": "this.thumbFromPressedClass", "class.igx-slider-thumb-to--pressed": "this.thumbToPressedClass" } }, ngImport: i0, template: "<div [ngClass]=\"getDotClass\"></div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: IgxSliderThumbComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "21.2.9", type: IgxSliderThumbComponent, isStandalone: true, selector: "igx-thumb", inputs: { value: "value", continuous: ["continuous", "continuous", booleanAttribute], thumbLabelVisibilityDuration: "thumbLabelVisibilityDuration", disabled: ["disabled", "disabled", booleanAttribute], onPan: "onPan", stepDistance: "stepDistance", step: "step", templateRef: "templateRef", context: "context", type: "type", deactiveState: ["deactiveState", "deactiveState", booleanAttribute], min: "min", max: "max", labels: "labels" }, outputs: { thumbValueChange: "thumbValueChange", thumbChange: "thumbChange", thumbBlur: "thumbBlur", hoverChange: "hoverChange" }, host: { listeners: { "pointerenter": "onPointerEnter()", "pointerleave": "onPointerLeave()", "keyup": "onKeyUp($event)", "keydown": "onKeyDown($event)", "blur": "onBlur()", "focus": "onFocusListener()" }, properties: { "attr.tabindex": "this.tabindex", "attr.role": "this.role", "attr.aria-valuenow": "this.ariaValueNow", "attr.aria-valuemin": "this.ariaValueMin", "attr.aria-valuemax": "this.ariaValueMax", "attr.aria-valuetext": "this.ariaValueText", "attr.aria-label": "this.ariaLabelAttr", "attr.aria-orientation": "this.ariaOrientation", "attr.aria-disabled": "this.ariaDisabled", "attr.z-index": "this.zIndex", "class.igx-slider-thumb-to--focused": "this.focused", "class.igx-slider-thumb-from": "this.thumbFromClass", "class.igx-slider-thumb-to": "this.thumbToClass", "class.igx-slider-thumb-from--active": "this.thumbFromActiveClass", "class.igx-slider-thumb-to--active": "this.thumbToActiveClass", "class.igx-slider-thumb-from--disabled": "this.thumbFromDisabledClass", "class.igx-slider-thumb-to--disabled": "this.thumbToDisabledClass", "class.igx-slider-thumb-from--pressed": "this.thumbFromPressedClass", "class.igx-slider-thumb-to--pressed": "this.thumbToPressedClass" } }, ngImport: i0, template: "<div [ngClass]=\"getDotClass\"></div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: IgxSliderThumbComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: IgxSliderThumbComponent, decorators: [{
             type: Component,
             args: [{ selector: 'igx-thumb', imports: [NgClass], template: "<div [ngClass]=\"getDotClass\"></div>\n" }]
         }], propDecorators: { value: [{
@@ -501,10 +503,10 @@ class IgxTickLabelsPipe {
         });
         return result;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: IgxTickLabelsPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.6", ngImport: i0, type: IgxTickLabelsPipe, isStandalone: true, name: "spreadTickLabels" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: IgxTickLabelsPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.9", ngImport: i0, type: IgxTickLabelsPipe, isStandalone: true, name: "spreadTickLabels" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: IgxTickLabelsPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: IgxTickLabelsPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'spreadTickLabels',
@@ -598,10 +600,10 @@ class IgxTicksComponent {
         const labelVal = labelStep * idx;
         return (this.minValue + labelVal).toFixed(2);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: IgxTicksComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: IgxTicksComponent, isStandalone: true, selector: "igx-ticks", inputs: { primaryTicks: "primaryTicks", secondaryTicks: "secondaryTicks", primaryTickLabels: ["primaryTickLabels", "primaryTickLabels", booleanAttribute], secondaryTickLabels: ["secondaryTickLabels", "secondaryTickLabels", booleanAttribute], ticksOrientation: "ticksOrientation", tickLabelsOrientation: "tickLabelsOrientation", maxValue: "maxValue", minValue: "minValue", labelsViewEnabled: ["labelsViewEnabled", "labelsViewEnabled", booleanAttribute], labels: "labels", tickLabelTemplateRef: "tickLabelTemplateRef" }, host: { properties: { "class.igx-slider__ticks": "this.ticksClass", "class.igx-slider__ticks--top": "this.ticksTopClass", "class.igx-slider__ticks--tall": "this.hasPrimaryClass", "class.igx-slider__tick-labels--top-bottom": "this.labelsTopToBottomClass", "class.igx-slider__tick-labels--bottom-top": "this.labelsBottomToTopClass" } }, ngImport: i0, template: "@for (n of [].constructor(ticksLength); track $index; let idx = $index) {\n    <div class=\"igx-slider__ticks-group\" [ngClass]=\"{ 'igx-slider__ticks-group--tall': isPrimary(idx)}\">\n        <div class=\"igx-slider__ticks-tick\">\n            <span class=\"igx-slider__ticks-label\" [ngClass]=\"{ 'igx-slider__tick-label--hidden': !hiddenTickLabels(idx)}\">\n                <ng-container *ngTemplateOutlet=\"tickLabelTemplateRef ? tickLabelTemplateRef : tickLabelDefaultTemplate; context: context(idx)\"></ng-container>\n            </span>\n        </div>\n    </div>\n}\n\n<ng-template #tickLabelDefaultTemplate let-value>\n    {{ value }}\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: IgxTicksComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: IgxTicksComponent, isStandalone: true, selector: "igx-ticks", inputs: { primaryTicks: "primaryTicks", secondaryTicks: "secondaryTicks", primaryTickLabels: ["primaryTickLabels", "primaryTickLabels", booleanAttribute], secondaryTickLabels: ["secondaryTickLabels", "secondaryTickLabels", booleanAttribute], ticksOrientation: "ticksOrientation", tickLabelsOrientation: "tickLabelsOrientation", maxValue: "maxValue", minValue: "minValue", labelsViewEnabled: ["labelsViewEnabled", "labelsViewEnabled", booleanAttribute], labels: "labels", tickLabelTemplateRef: "tickLabelTemplateRef" }, host: { properties: { "class.igx-slider__ticks": "this.ticksClass", "class.igx-slider__ticks--top": "this.ticksTopClass", "class.igx-slider__ticks--tall": "this.hasPrimaryClass", "class.igx-slider__tick-labels--top-bottom": "this.labelsTopToBottomClass", "class.igx-slider__tick-labels--bottom-top": "this.labelsBottomToTopClass" } }, ngImport: i0, template: "@for (n of [].constructor(ticksLength); track $index; let idx = $index) {\n    <div class=\"igx-slider__ticks-group\" [ngClass]=\"{ 'igx-slider__ticks-group--tall': isPrimary(idx)}\">\n        <div class=\"igx-slider__ticks-tick\">\n            <span class=\"igx-slider__ticks-label\" [ngClass]=\"{ 'igx-slider__tick-label--hidden': !hiddenTickLabels(idx)}\">\n                <ng-container *ngTemplateOutlet=\"tickLabelTemplateRef ? tickLabelTemplateRef : tickLabelDefaultTemplate; context: context(idx)\"></ng-container>\n            </span>\n        </div>\n    </div>\n}\n\n<ng-template #tickLabelDefaultTemplate let-value>\n    {{ value }}\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: IgxTicksComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: IgxTicksComponent, decorators: [{
             type: Component,
             args: [{ selector: 'igx-ticks', imports: [NgClass, NgTemplateOutlet], template: "@for (n of [].constructor(ticksLength); track $index; let idx = $index) {\n    <div class=\"igx-slider__ticks-group\" [ngClass]=\"{ 'igx-slider__ticks-group--tall': isPrimary(idx)}\">\n        <div class=\"igx-slider__ticks-tick\">\n            <span class=\"igx-slider__ticks-label\" [ngClass]=\"{ 'igx-slider__tick-label--hidden': !hiddenTickLabels(idx)}\">\n                <ng-container *ngTemplateOutlet=\"tickLabelTemplateRef ? tickLabelTemplateRef : tickLabelDefaultTemplate; context: context(idx)\"></ng-container>\n            </span>\n        </div>\n    </div>\n}\n\n<ng-template #tickLabelDefaultTemplate let-value>\n    {{ value }}\n</ng-template>\n" }]
         }], propDecorators: { primaryTicks: [{
@@ -1095,7 +1097,6 @@ class IgxSliderComponent {
         this._el = inject(ElementRef);
         this._cdr = inject(ChangeDetectorRef);
         this._ngZone = inject(NgZone);
-        this._dir = inject(_IgxDirectionality);
         /**
          * @hidden
          */
@@ -1614,17 +1615,12 @@ class IgxSliderComponent {
     calculateStepDistance() {
         return this._el.nativeElement.getBoundingClientRect().width / (this.maxValue - this.minValue) * this.step;
     }
-    // private toggleThumb() {
-    //     return this.thumbFrom.isActive ?
-    //         this.thumbTo.nativeElement.focus() :
-    //         this.thumbFrom.nativeElement.focus();
-    // }
     valueInRange(value, min = 0, max = 100) {
         return Math.max(Math.min(value, max), min);
     }
     positionHandler(thumbHandle, labelHandle, position) {
         const percent = `${this.valueToFraction(position) * 100}%`;
-        const dir = this._dir.rtl ? 'right' : 'left';
+        const dir = !isLeftToRight(this._el.nativeElement) ? 'right' : 'left';
         if (thumbHandle) {
             thumbHandle.nativeElement.style[dir] = percent;
         }
@@ -1757,7 +1753,8 @@ class IgxSliderComponent {
             if (positionGap) {
                 trackLeftIndention = Math.round((1 / positionGap * fromPosition) * 100);
             }
-            trackLeftIndention = this._dir.rtl ? -trackLeftIndention : trackLeftIndention;
+            const rtl = !isLeftToRight(this._el.nativeElement);
+            trackLeftIndention = rtl ? -trackLeftIndention : trackLeftIndention;
             this.renderer.setStyle(this.trackRef.nativeElement, 'transform', `scaleX(${positionGap}) translateX(${trackLeftIndention}%)`);
         }
         else {
@@ -1788,10 +1785,10 @@ class IgxSliderComponent {
     emitValueChange(oldValue) {
         this.valueChange.emit({ oldValue, value: this.value });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: IgxSliderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: IgxSliderComponent, isStandalone: true, selector: "igx-slider", inputs: { id: "id", thumbLabelVisibilityDuration: "thumbLabelVisibilityDuration", type: "type", labels: "labels", step: "step", disabled: ["disabled", "disabled", booleanAttribute], continuous: ["continuous", "continuous", booleanAttribute], minValue: "minValue", maxValue: "maxValue", lowerBound: "lowerBound", upperBound: "upperBound", value: "value", primaryTicks: "primaryTicks", secondaryTicks: "secondaryTicks", showTicks: ["showTicks", "showTicks", booleanAttribute], primaryTickLabels: ["primaryTickLabels", "primaryTickLabels", booleanAttribute], secondaryTickLabels: ["secondaryTickLabels", "secondaryTickLabels", booleanAttribute], ticksOrientation: "ticksOrientation", tickLabelsOrientation: "tickLabelsOrientation", lowerValue: "lowerValue", upperValue: "upperValue" }, outputs: { valueChange: "valueChange", lowerValueChange: "lowerValueChange", upperValueChange: "upperValueChange", dragFinished: "dragFinished" }, host: { listeners: { "focus": "onFocus()", "pointerdown": "onPointerDown($event)", "pointerup": "onPointerUp($event)" }, properties: { "class.igx-slider": "this.slierClass", "attr.id": "this.id", "class.igx-slider--disabled": "this.disabledClass" } }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: IgxSliderComponent, multi: true }], queries: [{ propertyName: "thumbFromTemplateRef", first: true, predicate: IgxThumbFromTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "thumbToTemplateRef", first: true, predicate: IgxThumbToTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "tickLabelTemplateRef", first: true, predicate: IgxTickLabelTemplateDirective, descendants: true, read: TemplateRef }], viewQueries: [{ propertyName: "trackRef", first: true, predicate: ["track"], descendants: true, static: true }, { propertyName: "ticks", first: true, predicate: ["ticks"], descendants: true, static: true }, { propertyName: "thumbs", predicate: IgxSliderThumbComponent, descendants: true }, { propertyName: "labelRefs", predicate: IgxThumbLabelComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "@if (showTicks && showTopTicks) {\n    <igx-ticks\n        ticksOrientation=\"top\"\n        [primaryTicks]=\"primaryTicks\"\n        [secondaryTicks]=\"secondaryTicks\"\n        [primaryTickLabels]=\"primaryTickLabels\"\n        [secondaryTickLabels]=\"secondaryTickLabels\"\n        [tickLabelsOrientation]=\"tickLabelsOrientation\"\n        [labelsViewEnabled]=\"labelsViewEnabled\"\n        [labels]=\"labels | spreadTickLabels:secondaryTicks\"\n        [tickLabelTemplateRef]=\"tickLabelTemplateRef\"\n        [minValue]=\"minValue\"\n        [maxValue]=\"maxValue\">\n    </igx-ticks>\n}\n<div class=\"igx-slider__track\">\n    <div class=\"igx-slider__track-inactive\"></div>\n    <div #track class=\"igx-slider__track-fill\"></div>\n    <div class=\"igx-slider__track-steps\">\n        <svg width=\"100%\" height=\"100%\">\n          <line #ticks x1=\"0\" y1=\"2\" x2=\"100%\" y2=\"2\"></line>\n        </svg>\n    </div>\n</div>\n<div class=\"igx-slider__thumbs\">\n    @if (isRange) {\n        <igx-thumb-label\n            type=\"from\"\n            [value]=\"lowerLabel\"\n            [templateRef]=\"thumbFromTemplateRef\"\n            [continuous]=\"continuous\"\n            [context]=\"context\"\n            [deactiveState]=\"deactivateThumbLabel\"\n            [thumb]=\"thumbFrom\"></igx-thumb-label>\n    }\n\n    @if (isRange) {\n        <igx-thumb\n            #thumbFrom\n            type=\"from\"\n            [value]=\"lowerLabel\"\n            [min]=\"minValue\"\n            [max]=\"maxValue\"\n            [disabled]=\"disabled\"\n            [continuous]=\"continuous\"\n            [onPan]=\"onPan\"\n            [stepDistance]=\"stepDistance\"\n            [step]=\"step\"\n            [templateRef]=\"thumbFromTemplateRef\"\n            [context]=\"context\"\n            [labels]=\"labels\"\n            (thumbChange)=\"onThumbChange()\"\n            (hoverChange)=\"onHoverChange($event)\"\n            [deactiveState]=\"deactivateThumbLabel\"\n            [thumbLabelVisibilityDuration]=\"thumbLabelVisibilityDuration\"></igx-thumb>\n    }\n\n    <igx-thumb-label\n        [value]=\"upperLabel\"\n        type=\"to\"\n        [templateRef]=\"thumbToTemplateRef\"\n        [continuous]=\"continuous\"\n        [context]=\"context\"\n        [deactiveState]=\"deactivateThumbLabel\"\n        [thumb]=\"thumbTo\"></igx-thumb-label>\n\n    <igx-thumb\n        #thumbTo\n        type=\"to\"\n        [value]=\"upperLabel\"\n        [min]=\"minValue\"\n        [max]=\"maxValue\"\n        [disabled]=\"disabled\"\n        [continuous]=\"continuous\"\n        [onPan]=\"onPan\"\n        [stepDistance]=\"stepDistance\"\n        [step]=\"step\"\n        [templateRef]=\"thumbToTemplateRef\"\n        [context]=\"context\"\n        [labels]=\"labels\"\n        (thumbChange)=\"onThumbChange()\"\n        (hoverChange)=\"onHoverChange($event)\"\n        [deactiveState]=\"deactivateThumbLabel\"\n        [thumbLabelVisibilityDuration]=\"thumbLabelVisibilityDuration\"></igx-thumb>\n</div>\n@if (showTicks && showBottomTicks) {\n    <igx-ticks\n        ticksOrientation=\"bottom\"\n        [primaryTicks]=\"primaryTicks\"\n        [secondaryTicks]=\"secondaryTicks\"\n        [primaryTickLabels]=\"primaryTickLabels\"\n        [secondaryTickLabels]=\"secondaryTickLabels\"\n        [tickLabelsOrientation]=\"tickLabelsOrientation\"\n        [labelsViewEnabled]=\"labelsViewEnabled\"\n        [labels]=\"labels | spreadTickLabels:secondaryTicks\"\n        [tickLabelTemplateRef]=\"tickLabelTemplateRef\"\n        [minValue]=\"minValue\"\n        [maxValue]=\"maxValue\">\n    </igx-ticks>\n}\n", dependencies: [{ kind: "component", type: IgxTicksComponent, selector: "igx-ticks", inputs: ["primaryTicks", "secondaryTicks", "primaryTickLabels", "secondaryTickLabels", "ticksOrientation", "tickLabelsOrientation", "maxValue", "minValue", "labelsViewEnabled", "labels", "tickLabelTemplateRef"] }, { kind: "component", type: IgxThumbLabelComponent, selector: "igx-thumb-label", inputs: ["value", "templateRef", "context", "type", "continuous", "deactiveState", "thumb"] }, { kind: "component", type: IgxSliderThumbComponent, selector: "igx-thumb", inputs: ["value", "continuous", "thumbLabelVisibilityDuration", "disabled", "onPan", "stepDistance", "step", "templateRef", "context", "type", "deactiveState", "min", "max", "labels"], outputs: ["thumbValueChange", "thumbChange", "thumbBlur", "hoverChange"] }, { kind: "pipe", type: IgxTickLabelsPipe, name: "spreadTickLabels" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: IgxSliderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: IgxSliderComponent, isStandalone: true, selector: "igx-slider", inputs: { id: "id", thumbLabelVisibilityDuration: "thumbLabelVisibilityDuration", type: "type", labels: "labels", step: "step", disabled: ["disabled", "disabled", booleanAttribute], continuous: ["continuous", "continuous", booleanAttribute], minValue: "minValue", maxValue: "maxValue", lowerBound: "lowerBound", upperBound: "upperBound", value: "value", primaryTicks: "primaryTicks", secondaryTicks: "secondaryTicks", showTicks: ["showTicks", "showTicks", booleanAttribute], primaryTickLabels: ["primaryTickLabels", "primaryTickLabels", booleanAttribute], secondaryTickLabels: ["secondaryTickLabels", "secondaryTickLabels", booleanAttribute], ticksOrientation: "ticksOrientation", tickLabelsOrientation: "tickLabelsOrientation", lowerValue: "lowerValue", upperValue: "upperValue" }, outputs: { valueChange: "valueChange", lowerValueChange: "lowerValueChange", upperValueChange: "upperValueChange", dragFinished: "dragFinished" }, host: { listeners: { "focus": "onFocus()", "pointerdown": "onPointerDown($event)", "pointerup": "onPointerUp($event)" }, properties: { "class.igx-slider": "this.slierClass", "attr.id": "this.id", "class.igx-slider--disabled": "this.disabledClass" } }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: IgxSliderComponent, multi: true }], queries: [{ propertyName: "thumbFromTemplateRef", first: true, predicate: IgxThumbFromTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "thumbToTemplateRef", first: true, predicate: IgxThumbToTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "tickLabelTemplateRef", first: true, predicate: IgxTickLabelTemplateDirective, descendants: true, read: TemplateRef }], viewQueries: [{ propertyName: "trackRef", first: true, predicate: ["track"], descendants: true, static: true }, { propertyName: "ticks", first: true, predicate: ["ticks"], descendants: true, static: true }, { propertyName: "thumbs", predicate: IgxSliderThumbComponent, descendants: true }, { propertyName: "labelRefs", predicate: IgxThumbLabelComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "@if (showTicks && showTopTicks) {\n    <igx-ticks\n        ticksOrientation=\"top\"\n        [primaryTicks]=\"primaryTicks\"\n        [secondaryTicks]=\"secondaryTicks\"\n        [primaryTickLabels]=\"primaryTickLabels\"\n        [secondaryTickLabels]=\"secondaryTickLabels\"\n        [tickLabelsOrientation]=\"tickLabelsOrientation\"\n        [labelsViewEnabled]=\"labelsViewEnabled\"\n        [labels]=\"labels | spreadTickLabels:secondaryTicks\"\n        [tickLabelTemplateRef]=\"tickLabelTemplateRef\"\n        [minValue]=\"minValue\"\n        [maxValue]=\"maxValue\">\n    </igx-ticks>\n}\n<div class=\"igx-slider__track\">\n    <div class=\"igx-slider__track-inactive\"></div>\n    <div #track class=\"igx-slider__track-fill\"></div>\n    <div class=\"igx-slider__track-steps\">\n        <svg width=\"100%\" height=\"100%\">\n          <line #ticks x1=\"0\" y1=\"2\" x2=\"100%\" y2=\"2\"></line>\n        </svg>\n    </div>\n</div>\n<div class=\"igx-slider__thumbs\">\n    @if (isRange) {\n        <igx-thumb-label\n            type=\"from\"\n            [value]=\"lowerLabel\"\n            [templateRef]=\"thumbFromTemplateRef\"\n            [continuous]=\"continuous\"\n            [context]=\"context\"\n            [deactiveState]=\"deactivateThumbLabel\"\n            [thumb]=\"thumbFrom\"></igx-thumb-label>\n    }\n\n    @if (isRange) {\n        <igx-thumb\n            #thumbFrom\n            type=\"from\"\n            [value]=\"lowerLabel\"\n            [min]=\"minValue\"\n            [max]=\"maxValue\"\n            [disabled]=\"disabled\"\n            [continuous]=\"continuous\"\n            [onPan]=\"onPan\"\n            [stepDistance]=\"stepDistance\"\n            [step]=\"step\"\n            [templateRef]=\"thumbFromTemplateRef\"\n            [context]=\"context\"\n            [labels]=\"labels\"\n            (thumbChange)=\"onThumbChange()\"\n            (hoverChange)=\"onHoverChange($event)\"\n            [deactiveState]=\"deactivateThumbLabel\"\n            [thumbLabelVisibilityDuration]=\"thumbLabelVisibilityDuration\"></igx-thumb>\n    }\n\n    <igx-thumb-label\n        [value]=\"upperLabel\"\n        type=\"to\"\n        [templateRef]=\"thumbToTemplateRef\"\n        [continuous]=\"continuous\"\n        [context]=\"context\"\n        [deactiveState]=\"deactivateThumbLabel\"\n        [thumb]=\"thumbTo\"></igx-thumb-label>\n\n    <igx-thumb\n        #thumbTo\n        type=\"to\"\n        [value]=\"upperLabel\"\n        [min]=\"minValue\"\n        [max]=\"maxValue\"\n        [disabled]=\"disabled\"\n        [continuous]=\"continuous\"\n        [onPan]=\"onPan\"\n        [stepDistance]=\"stepDistance\"\n        [step]=\"step\"\n        [templateRef]=\"thumbToTemplateRef\"\n        [context]=\"context\"\n        [labels]=\"labels\"\n        (thumbChange)=\"onThumbChange()\"\n        (hoverChange)=\"onHoverChange($event)\"\n        [deactiveState]=\"deactivateThumbLabel\"\n        [thumbLabelVisibilityDuration]=\"thumbLabelVisibilityDuration\"></igx-thumb>\n</div>\n@if (showTicks && showBottomTicks) {\n    <igx-ticks\n        ticksOrientation=\"bottom\"\n        [primaryTicks]=\"primaryTicks\"\n        [secondaryTicks]=\"secondaryTicks\"\n        [primaryTickLabels]=\"primaryTickLabels\"\n        [secondaryTickLabels]=\"secondaryTickLabels\"\n        [tickLabelsOrientation]=\"tickLabelsOrientation\"\n        [labelsViewEnabled]=\"labelsViewEnabled\"\n        [labels]=\"labels | spreadTickLabels:secondaryTicks\"\n        [tickLabelTemplateRef]=\"tickLabelTemplateRef\"\n        [minValue]=\"minValue\"\n        [maxValue]=\"maxValue\">\n    </igx-ticks>\n}\n", dependencies: [{ kind: "component", type: IgxTicksComponent, selector: "igx-ticks", inputs: ["primaryTicks", "secondaryTicks", "primaryTickLabels", "secondaryTickLabels", "ticksOrientation", "tickLabelsOrientation", "maxValue", "minValue", "labelsViewEnabled", "labels", "tickLabelTemplateRef"] }, { kind: "component", type: IgxThumbLabelComponent, selector: "igx-thumb-label", inputs: ["value", "templateRef", "context", "type", "continuous", "deactiveState", "thumb"] }, { kind: "component", type: IgxSliderThumbComponent, selector: "igx-thumb", inputs: ["value", "continuous", "thumbLabelVisibilityDuration", "disabled", "onPan", "stepDistance", "step", "templateRef", "context", "type", "deactiveState", "min", "max", "labels"], outputs: ["thumbValueChange", "thumbChange", "thumbBlur", "hoverChange"] }, { kind: "pipe", type: IgxTickLabelsPipe, name: "spreadTickLabels" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: IgxSliderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: IgxSliderComponent, decorators: [{
             type: Component,
             args: [{ providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: IgxSliderComponent, multi: true }], selector: 'igx-slider', imports: [IgxTicksComponent, IgxThumbLabelComponent, IgxSliderThumbComponent, IgxTickLabelsPipe], template: "@if (showTicks && showTopTicks) {\n    <igx-ticks\n        ticksOrientation=\"top\"\n        [primaryTicks]=\"primaryTicks\"\n        [secondaryTicks]=\"secondaryTicks\"\n        [primaryTickLabels]=\"primaryTickLabels\"\n        [secondaryTickLabels]=\"secondaryTickLabels\"\n        [tickLabelsOrientation]=\"tickLabelsOrientation\"\n        [labelsViewEnabled]=\"labelsViewEnabled\"\n        [labels]=\"labels | spreadTickLabels:secondaryTicks\"\n        [tickLabelTemplateRef]=\"tickLabelTemplateRef\"\n        [minValue]=\"minValue\"\n        [maxValue]=\"maxValue\">\n    </igx-ticks>\n}\n<div class=\"igx-slider__track\">\n    <div class=\"igx-slider__track-inactive\"></div>\n    <div #track class=\"igx-slider__track-fill\"></div>\n    <div class=\"igx-slider__track-steps\">\n        <svg width=\"100%\" height=\"100%\">\n          <line #ticks x1=\"0\" y1=\"2\" x2=\"100%\" y2=\"2\"></line>\n        </svg>\n    </div>\n</div>\n<div class=\"igx-slider__thumbs\">\n    @if (isRange) {\n        <igx-thumb-label\n            type=\"from\"\n            [value]=\"lowerLabel\"\n            [templateRef]=\"thumbFromTemplateRef\"\n            [continuous]=\"continuous\"\n            [context]=\"context\"\n            [deactiveState]=\"deactivateThumbLabel\"\n            [thumb]=\"thumbFrom\"></igx-thumb-label>\n    }\n\n    @if (isRange) {\n        <igx-thumb\n            #thumbFrom\n            type=\"from\"\n            [value]=\"lowerLabel\"\n            [min]=\"minValue\"\n            [max]=\"maxValue\"\n            [disabled]=\"disabled\"\n            [continuous]=\"continuous\"\n            [onPan]=\"onPan\"\n            [stepDistance]=\"stepDistance\"\n            [step]=\"step\"\n            [templateRef]=\"thumbFromTemplateRef\"\n            [context]=\"context\"\n            [labels]=\"labels\"\n            (thumbChange)=\"onThumbChange()\"\n            (hoverChange)=\"onHoverChange($event)\"\n            [deactiveState]=\"deactivateThumbLabel\"\n            [thumbLabelVisibilityDuration]=\"thumbLabelVisibilityDuration\"></igx-thumb>\n    }\n\n    <igx-thumb-label\n        [value]=\"upperLabel\"\n        type=\"to\"\n        [templateRef]=\"thumbToTemplateRef\"\n        [continuous]=\"continuous\"\n        [context]=\"context\"\n        [deactiveState]=\"deactivateThumbLabel\"\n        [thumb]=\"thumbTo\"></igx-thumb-label>\n\n    <igx-thumb\n        #thumbTo\n        type=\"to\"\n        [value]=\"upperLabel\"\n        [min]=\"minValue\"\n        [max]=\"maxValue\"\n        [disabled]=\"disabled\"\n        [continuous]=\"continuous\"\n        [onPan]=\"onPan\"\n        [stepDistance]=\"stepDistance\"\n        [step]=\"step\"\n        [templateRef]=\"thumbToTemplateRef\"\n        [context]=\"context\"\n        [labels]=\"labels\"\n        (thumbChange)=\"onThumbChange()\"\n        (hoverChange)=\"onHoverChange($event)\"\n        [deactiveState]=\"deactivateThumbLabel\"\n        [thumbLabelVisibilityDuration]=\"thumbLabelVisibilityDuration\"></igx-thumb>\n</div>\n@if (showTicks && showBottomTicks) {\n    <igx-ticks\n        ticksOrientation=\"bottom\"\n        [primaryTicks]=\"primaryTicks\"\n        [secondaryTicks]=\"secondaryTicks\"\n        [primaryTickLabels]=\"primaryTickLabels\"\n        [secondaryTickLabels]=\"secondaryTickLabels\"\n        [tickLabelsOrientation]=\"tickLabelsOrientation\"\n        [labelsViewEnabled]=\"labelsViewEnabled\"\n        [labels]=\"labels | spreadTickLabels:secondaryTicks\"\n        [tickLabelTemplateRef]=\"tickLabelTemplateRef\"\n        [minValue]=\"minValue\"\n        [maxValue]=\"maxValue\">\n    </igx-ticks>\n}\n" }]
         }], ctorParameters: () => [], propDecorators: { trackRef: [{
@@ -1903,11 +1900,11 @@ const IGX_SLIDER_DIRECTIVES = [
  * IMPORTANT: The following is NgModule exported for backwards-compatibility before standalone components
  */
 class IgxSliderModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: IgxSliderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.6", ngImport: i0, type: IgxSliderModule, imports: [IgxSliderComponent, IgxThumbFromTemplateDirective, IgxThumbToTemplateDirective, IgxTickLabelTemplateDirective], exports: [IgxSliderComponent, IgxThumbFromTemplateDirective, IgxThumbToTemplateDirective, IgxTickLabelTemplateDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: IgxSliderModule }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: IgxSliderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.9", ngImport: i0, type: IgxSliderModule, imports: [IgxSliderComponent, IgxThumbFromTemplateDirective, IgxThumbToTemplateDirective, IgxTickLabelTemplateDirective], exports: [IgxSliderComponent, IgxThumbFromTemplateDirective, IgxThumbToTemplateDirective, IgxTickLabelTemplateDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: IgxSliderModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: IgxSliderModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: IgxSliderModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [