@acorex/components 18.8.2 → 18.8.4

package/fesm2022/acorex-components-range-slider.mjs

@@ -13,7 +13,6 @@ import { CommonModule } from '@angular/common';
  * Range slider for selecting a range of values.
  */
 class AXRangeSliderComponent extends classes((MXValueComponent)) {
-    //protected AXTooltip = computed(() => {});
     constructor() {
         super();
         /**
@@ -66,6 +65,10 @@ class AXRangeSliderComponent extends classes((MXValueComponent)) {
          * @description deferent modes for snap including start, end and both
          */
         this.snapMode = input('start');
+        /**
+         * @description a flag for having step
+         */
+        this.hasStep = input(true);
         /**
          * @description a flag for showing snap
          */
@@ -78,11 +81,30 @@ class AXRangeSliderComponent extends classes((MXValueComponent)) {
          * @description a flag for showing tooltip for values
          */
         this.hasTooltip = input(false);
+        /**
+         * @ignore
+         */
         this.height = 0.25;
+        /**
+         * @ignore
+         */
         this.newHeight = 'var(--ax-range-slider-base-thickness)';
+        /**
+         * @ignore
+         */
         this.range = computed(() => this.max() - this.min());
+        /**
+         * @ignore
+         */
         this.isHorizontal = computed(() => this.orientation() === 'horizontal');
+        /**
+         * @ignore
+         */
         this.isDual = computed(() => this.mode() === 'dual');
+        /**
+         * @ignore
+         */
+        this.correctMinMax = computed(() => this.max() - this.min() > 0);
         /**
          * @ignore
          */
@@ -141,27 +163,31 @@ class AXRangeSliderComponent extends classes((MXValueComponent)) {
                 height: this.isDual()
                     ? this.calculatePos()[1] - this.calculatePos()[0] + '%'
                     : this.calculatePos() + '%',
-                top: this.mode() === 'dual' ? this.calculatePos()[0] + '%' : this.min() + '%',
+                bottom: this.mode() === 'dual' ? this.calculatePos()[0] + '%' : '0%',
             });
         /**
          * @ignore
          */
         this.AXRangeSliderHandler1 = computed(() => this.isHorizontal()
             ? {
-                left: this.isDual() ? this.calculatePos()[0] + '%' : this.calculatePos() + '%',
+                left: this.isDual()
+                    ? this.calculatePos()[0] + 0.1 + '%'
+                    : this.calculatePos() + 0.1 + '%',
             }
             : {
-                top: this.isDual() ? this.calculatePos()[0] + '%' : this.calculatePos() + '%',
+                bottom: this.isDual()
+                    ? this.calculatePos()[0] - 5.4 + '%'
+                    : this.calculatePos() - 5.4 + '%',
             });
         /**
          * @ignore
          */
         this.AXRangeSliderHandler2 = computed(() => this.isHorizontal()
             ? {
-                left: this.calculatePos()[1] + '%',
+                left: this.calculatePos()[1] + 0.1 + '%',
             }
             : {
-                top: this.calculatePos()[1] + '%',
+                bottom: this.calculatePos()[1] - 5.4 + '%',
             });
         /**
          * @ignore
@@ -213,28 +239,42 @@ class AXRangeSliderComponent extends classes((MXValueComponent)) {
                 }
             }
         });
+        effect(() => this.commitValue(this.values()));
         effect(() => {
-            this.fixInitializeValues();
-            this.fixChangingMode();
+            if (this.correctMinMax()) {
+                this.fixInitializeValues();
+                this.fixChangingMode();
+            }
+            else {
+                console.error(`Min = ${this.min()} And Max = ${this.max()} is not correct inputs.`);
+            }
         }, { allowSignalWrites: true });
+        this.onValueChanged.subscribe((value) => {
+            this.values.set(value.value);
+        });
     }
     /**
      * @ignore
      */
     ngOnInit() {
-        //(window as any).rangeSlider = this; for debugging purpose only
         super.ngOnInit();
-        this.initializeValues();
+        //(window as any).rangeSlider = this; //for debugging purpose only
+        if (!this.correctMinMax()) {
+            console.error(`Min = ${this.min()} And Max = ${this.max()} is not correct inputs.`);
+        }
+        else {
+            this.initializeValues();
+        }
     }
     /**
      * @ignore
      */
-    handleOnStart(event, circle) {
+    onStartHandler(event, circle) {
         this.zone.runOutsideAngular(() => {
-            if (this.disabled)
+            if (this.disabled || this.readonly || !this.correctMinMax())
                 return;
             event.preventDefault();
-            this.sliderElement = event.target.closest('ax-range-slider');
+            this.sliderElement = event.target.closest('.ax-range-slider');
             if (this.sliderElement) {
                 this.choosenHandler = circle;
                 const moveListener = (moveEvent) => this.onMove(moveEvent, circle);
@@ -249,33 +289,30 @@ class AXRangeSliderComponent extends classes((MXValueComponent)) {
     /**
      * @ignore
      */
-    onclickBar(event) {
+    onStartBar(event) {
         let circle = 'first';
-        this.sliderElement = event.target.closest('ax-range-slider');
+        this.sliderElement = event.target.closest('.ax-range-slider');
         this.zone.runOutsideAngular(() => {
-            if (!this.sliderElement || this.disabled)
+            if (!this.sliderElement || this.disabled || !this.correctMinMax())
                 return;
-            const clientX = event instanceof MouseEvent ? event.clientX : event.touches[0].clientX;
-            const sliderRect = this.sliderElement.getBoundingClientRect();
-            const clickPosition = ((clientX - sliderRect.left) / sliderRect.width) * 100;
-            let newValue = Math.round(this.min() + (clickPosition / 100) * (this.max() - this.min()));
-            newValue = this.calculateStep(newValue);
+            const calculatePercent = this.calculatePercentOnMove(event);
+            let value = this.getValueFromPercent(calculatePercent);
+            value = Number.parseFloat(value.toFixed(2));
+            if (this.hasStep()) {
+                value = this.roundToStep(value);
+            }
             if (this.isDual()) {
-                if (clickPosition < this.calculatePos()[0]) {
-                    this.values.set([newValue, this.values()[1]]);
-                    this.commitValue(this.values());
-                }
-                else if (clickPosition > this.calculatePos()[1]) {
+                if (value >= (this.values()[1] - this.values()[0]) / 2) {
+                    this.values.set([this.values()[0], value]);
                     circle = 'second';
-                    this.values.set([this.values()[0], newValue]);
-                    this.commitValue(this.values());
+                }
+                else {
+                    this.values.set([value, this.values()[1]]);
+                    circle = 'first';
                 }
             }
             else {
-                if (clickPosition > this.calculatePos()) {
-                    this.values.set(newValue);
-                    this.commitValue(this.values());
-                }
+                this.values.set(value);
             }
             this.onStart.emit({
                 component: this,
@@ -284,64 +321,36 @@ class AXRangeSliderComponent extends classes((MXValueComponent)) {
                 data: this.values(),
             });
         });
-        this.handleOnStart(event, circle);
+        this.onStartHandler(event, circle);
     }
     /**
      * @ignore
      */
     onMove(event, circle) {
-        if (!this.sliderElement || this.disabled)
+        if (!this.sliderElement)
             return;
-        const sliderRect = this.sliderElement.getBoundingClientRect();
-        let newValue;
-        if (this.isHorizontal()) {
-            const clientX = event instanceof MouseEvent ? event.clientX : event.touches[0].clientX;
-            let newLeft = ((clientX - sliderRect.left) / sliderRect.width) * 100;
-            newLeft = Math.max(0, Math.min(newLeft, 100));
-            newValue = Math.round(this.min() + (newLeft / 100) * (this.max() - this.min()));
-        }
-        else {
-            const clientY = event instanceof MouseEvent ? event.clientY : event.touches[0].clientY;
-            let newLeft = ((clientY - sliderRect.top) / sliderRect.height) * 100;
-            newLeft = Math.max(0, Math.min(newLeft, 100));
-            newValue = Math.round(this.min() + (newLeft / 100) * (this.max() - this.min()));
+        const calculatePercent = this.calculatePercentOnMove(event);
+        let value = this.getValueFromPercent(calculatePercent);
+        value = Number.parseFloat(value.toFixed(2));
+        if (this.hasStep()) {
+            value = this.roundToStep(value);
         }
-        if (!this.readonly) {
-            if (this.isDual()) {
-                if (circle === 'first') {
-                    newValue = Math.max(this.min(), Math.min(newValue, this.values()[1] - this.step()));
-                    if (this.step() !== 1)
-                        newValue = this.calculateStep(newValue);
-                    if (this.values()[0] !== newValue) {
-                        this.values.set([newValue, this.values()[1]]);
-                        this.commitValue(this.values());
-                    }
-                }
-                else {
-                    newValue = Math.min(this.max(), Math.max(newValue, this.values()[0] + this.step()));
-                    if (this.step() !== 1)
-                        newValue = this.calculateStep(newValue);
-                    if (this.values()[1] !== newValue) {
-                        this.values.set([this.values()[0], newValue]);
-                        this.commitValue(this.values());
-                    }
+        if (this.isDual()) {
+            if (circle === 'first' && value < this.values()[1]) {
+                if (this.checkValues(value, 'first', this.values()[1]) && this.values()[0] !== value) {
+                    this.values.set([value, this.values()[1]]);
                 }
             }
-            else {
-                newValue = Math.max(this.min(), newValue);
-                if (this.step() !== 1)
-                    newValue = this.calculateStep(newValue);
-                if (this.values() !== newValue) {
-                    this.values.set(newValue);
-                    this.commitValue(newValue);
+            else if (circle === 'second' && value > this.values()[0] && this.values()[1] !== value) {
+                if (this.checkValues(value, 'second', this.values()[0])) {
+                    this.values.set([this.values()[0], value]);
                 }
             }
-            this.onStart.emit({
-                component: this,
-                htmlElement: event.target,
-                isUserInteraction: event.isTrusted,
-                data: this.values(),
-            });
+        }
+        else {
+            if (this.checkValue(value) && this.values() !== value) {
+                this.values.set(value);
+            }
         }
     }
     /**
@@ -373,27 +382,21 @@ class AXRangeSliderComponent extends classes((MXValueComponent)) {
             else {
                 this.values.set(this.min());
             }
-            this.commitValue(this.values());
         }
     }
     /**
      * @ignore
      */
     fixInitializeValues() {
-        //swap value
         if (this.isDual() && this.values()[0] > this.values()[1]) {
             this.values.set([this.values()[1], this.values()[0]]);
-            this.commitValue(this.values());
         }
-        //not in range
         if (typeof this.values() === 'number' && !this.checkValue(this.values())) {
             this.values.set(this.min());
-            this.commitValue(this.values());
         }
         else if (typeof this.values() !== 'number' &&
             !this.checkValues(this.values()[0], 'first', this.values()[1])) {
             this.values.set([this.min(), this.max()]);
-            this.commitValue(this.values());
         }
     }
     /**
@@ -402,17 +405,13 @@ class AXRangeSliderComponent extends classes((MXValueComponent)) {
     fixInitializeStep() {
         if (this.step() !== 1) {
             if (this.isDual()) {
-                this.values.update((old) => [this.calculateStep(old[0]), this.calculateStep(old[1])]);
-                this.commitValue(this.values());
-                this.commitValue(this.values());
+                this.values.update((old) => [this.roundToStep(old[0]), this.roundToStep(old[1])]);
                 if (this.values()[0] === this.values()[1]) {
-                    this.values.update((old) => [this.calculateStep(old[0]), this.calculateStep(old[1]) + this.step()]);
-                    this.commitValue(this.values());
+                    this.values.update((old) => [this.roundToStep(old[0]), this.roundToStep(old[1]) + this.step()]);
                 }
             }
             else {
-                this.values.update((old) => this.calculateStep(old));
-                this.commitValue(this.values());
+                this.values.update((old) => this.roundToStep(old));
             }
         }
     }
@@ -422,27 +421,47 @@ class AXRangeSliderComponent extends classes((MXValueComponent)) {
     fixChangingMode() {
         if (typeof this.values() === 'number' && this.isDual()) {
             this.values.set([this.min(), this.max()]);
-            this.commitValue(this.values());
         }
         else if (typeof this.values() !== 'number' && !this.isDual()) {
             this.values.set(this.min());
-            this.commitValue(this.values());
         }
     }
     /**
      * @ignore
      */
-    calculateStep(x) {
-        const roundedValue = Math.round(x / this.step()) * this.step();
-        if (roundedValue > this.max())
-            return this.max();
-        else if (roundedValue < this.min())
-            return this.min();
-        //else if (x >= this.min() && x < this.min() - (this.min() % this.step())) return this.min();
-        else if (x <= this.max() && x > this.max() - (this.max() % this.step()))
-            return this.max();
-        else
-            return roundedValue;
+    calculatePercentOnMove(event) {
+        const sliderRect = this.sliderElement.getBoundingClientRect();
+        let percent;
+        if (this.isHorizontal()) {
+            const clientX = event instanceof MouseEvent ? event.clientX : event.touches[0].clientX;
+            const x = clientX - sliderRect.left;
+            percent = (x / sliderRect.width) * 100;
+        }
+        else {
+            const clientY = event instanceof MouseEvent ? event.clientY : event.touches[0].clientY;
+            const y = -(clientY - sliderRect.bottom); //reverce slider from bottom to top
+            percent = (y / sliderRect.height) * 100;
+        }
+        if (percent < 0) {
+            percent = 0;
+        }
+        else if (percent > 100) {
+            percent = 100;
+        }
+        return percent;
+    }
+    /**
+     * @ignore
+     */
+    roundToStep(value) {
+        const lower = Math.max(this.min(), Math.floor((value - this.min()) / this.step()) * this.step() + this.min());
+        const upper = Math.min(this.max(), lower + this.step());
+        if (value - lower < upper - value) {
+            return lower;
+        }
+        else {
+            return upper;
+        }
     }
     /**
      * @ignore
@@ -474,11 +493,17 @@ class AXRangeSliderComponent extends classes((MXValueComponent)) {
         else
             return false;
     }
+    /**
+     * @ignore
+     */
+    getValueFromPercent(value) {
+        return this.min() + (value * (this.max() - this.min())) / 100;
+    }
     /**
      * @ignore
      */
     getPercantage(value) {
-        return (value / this.range()) * 100;
+        return this.range() !== 0 ? (value / this.range()) * 100 : 0;
     }
     /**
      * Increase a step to value if slider in single mode
@@ -487,11 +512,11 @@ class AXRangeSliderComponent extends classes((MXValueComponent)) {
      */
     increaseStep() {
         if (this.isDual()) {
-            const newValue = this.calculateStep(this.values()[1] + this.step());
+            const newValue = this.roundToStep(this.values()[1] + this.step());
             this.values.set([this.values()[0], newValue]);
         }
         else {
-            const newValue = this.calculateStep(this.values() + this.step());
+            const newValue = this.roundToStep(this.values() + this.step());
             this.values.set(newValue);
         }
     }
@@ -502,11 +527,11 @@ class AXRangeSliderComponent extends classes((MXValueComponent)) {
      */
     decreaseStep() {
         if (this.isDual()) {
-            const newValue = this.calculateStep(this.values()[0] - this.step());
+            const newValue = this.roundToStep(this.values()[0] - this.step());
             this.values.set([newValue, this.values()[1]]);
         }
         else {
-            const newValue = this.calculateStep(this.values() - this.step());
+            const newValue = this.roundToStep(this.values() - this.step());
             this.values.set(newValue);
         }
     }
@@ -516,57 +541,51 @@ class AXRangeSliderComponent extends classes((MXValueComponent)) {
     onWheel(event) {
         this.zone.runOutsideAngular(() => {
             event.preventDefault();
-            if (!this.choosenHandler || this.readonly || this.disabled)
+            if (!this.choosenHandler || this.readonly || this.disabled || !this.correctMinMax())
                 return;
             let newValue;
             if (this.isDual()) {
                 if (event.deltaY < 0) {
                     if (this.choosenHandler === 'first') {
-                        newValue = this.calculateStep(this.values()[0] + this.step());
+                        newValue = this.roundToStep(this.values()[0] + this.step());
                         if (this.checkValues(newValue, this.choosenHandler, this.values()[1]) &&
                             this.values()[0] !== newValue) {
-                            this.values.update((old) => [this.calculateStep(old[0] + this.step()), old[1]]);
-                            this.commitValue(this.values());
+                            this.values.update((old) => [this.roundToStep(old[0] + this.step()), old[1]]);
                         }
                     }
                     else {
-                        newValue = this.calculateStep(this.values()[1] + this.step());
+                        newValue = this.roundToStep(this.values()[1] + this.step());
                         if (newValue <= this.max() && this.values()[1] !== newValue) {
-                            this.values.update((old) => [old[0], this.calculateStep(old[1] + this.step())]);
-                            this.commitValue(this.values());
+                            this.values.update((old) => [old[0], this.roundToStep(old[1] + this.step())]);
                         }
                     }
                 }
                 else {
                     if (this.choosenHandler === 'first') {
-                        newValue = this.calculateStep(this.values()[0] - this.step());
+                        newValue = this.roundToStep(this.values()[0] - this.step());
                         if (this.checkValues(newValue, this.choosenHandler, this.values()[1]) &&
                             this.values() !== newValue) {
-                            this.values.update((old) => [this.calculateStep(old[0] - this.step()), old[1]]);
-                            this.commitValue(this.values());
+                            this.values.update((old) => [this.roundToStep(old[0] - this.step()), old[1]]);
                         }
                     }
                     else {
-                        newValue = this.calculateStep(this.values()[1] - this.step());
+                        newValue = this.roundToStep(this.values()[1] - this.step());
                         if (this.checkValues(newValue, this.choosenHandler, this.values()[0]) &&
                             this.values()[1] !== newValue) {
-                            this.values.update((old) => [old[0], this.calculateStep(old[1] - this.step())]);
-                            this.commitValue(this.values());
+                            this.values.update((old) => [old[0], this.roundToStep(old[1] - this.step())]);
                         }
                     }
                 }
             }
             else {
                 if (event.deltaY < 0) {
-                    if (this.checkValue(this.calculateStep(this.values() + this.step()))) {
-                        this.values.update((old) => this.calculateStep(old + this.step()));
-                        this.commitValue(this.values());
+                    if (this.checkValue(this.roundToStep(this.values() + this.step()))) {
+                        this.values.update((old) => this.roundToStep(old + this.step()));
                     }
                 }
                 else {
-                    if (this.checkValue(this.calculateStep(this.values() - this.step()))) {
-                        this.values.update((old) => this.calculateStep(old - this.step()));
-                        this.commitValue(this.values());
+                    if (this.checkValue(this.roundToStep(this.values() - this.step()))) {
+                        this.values.update((old) => this.roundToStep(old - this.step()));
                     }
                 }
             }
@@ -582,15 +601,18 @@ class AXRangeSliderComponent extends classes((MXValueComponent)) {
             `${this.readonly ? 'ax-state-readonly' : ''}`,
         ];
     }
+    onNgModelChange(event) {
+        this.values.set(event.value);
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXRangeSliderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: AXRangeSliderComponent, selector: "ax-range-slider", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: false, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, values: { classPropertyName: "values", publicName: "values", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, snap: { classPropertyName: "snap", publicName: "snap", isSignal: true, isRequired: false, transformFunction: null }, tooltipMode: { classPropertyName: "tooltipMode", publicName: "tooltipMode", isSignal: true, isRequired: false, transformFunction: null }, snapMode: { classPropertyName: "snapMode", publicName: "snapMode", isSignal: true, isRequired: false, transformFunction: null }, hasSnap: { classPropertyName: "hasSnap", publicName: "hasSnap", isSignal: true, isRequired: false, transformFunction: null }, hasLable: { classPropertyName: "hasLable", publicName: "hasLable", isSignal: true, isRequired: false, transformFunction: null }, hasTooltip: { classPropertyName: "hasTooltip", publicName: "hasTooltip", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onStart: "onStart", values: "valuesChange" }, host: { listeners: { "wheel": "onWheel($event)" }, properties: { "class": "this.__hostClass" } }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: AXRangeSliderComponent, selector: "ax-range-slider", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: false, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, values: { classPropertyName: "values", publicName: "values", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, snap: { classPropertyName: "snap", publicName: "snap", isSignal: true, isRequired: false, transformFunction: null }, tooltipMode: { classPropertyName: "tooltipMode", publicName: "tooltipMode", isSignal: true, isRequired: false, transformFunction: null }, snapMode: { classPropertyName: "snapMode", publicName: "snapMode", isSignal: true, isRequired: false, transformFunction: null }, hasStep: { classPropertyName: "hasStep", publicName: "hasStep", isSignal: true, isRequired: false, transformFunction: null }, hasSnap: { classPropertyName: "hasSnap", publicName: "hasSnap", isSignal: true, isRequired: false, transformFunction: null }, hasLable: { classPropertyName: "hasLable", publicName: "hasLable", isSignal: true, isRequired: false, transformFunction: null }, hasTooltip: { classPropertyName: "hasTooltip", publicName: "hasTooltip", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onStart: "onStart", values: "valuesChange" }, host: { listeners: { "wheel": "onWheel($event)", "onValueChanged": "onNgModelChange($event)" }, properties: { "class": "this.__hostClass" } }, providers: [
             { provide: AXValuableComponent, useExisting: AXRangeSliderComponent },
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => AXRangeSliderComponent),
                 multi: true,
             },
-        ], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-range-slider\" [class]=\"'ax-orientation-' + orientation()\">\n  <div class=\"ax-range-slider-bar\" (mousedown)=\"onclickBar($event)\" (touchstart)=\"onclickBar($event)\"></div>\n  <div class=\"ax-range-slider-highlight\" [ngStyle]=\"AXRangeSliderHighlight()\"></div>\n\n  <div\n    class=\"ax-range-slider-handler\"\n    [ngStyle]=\"AXRangeSliderHandler1()\"\n    (mousedown)=\"handleOnStart($event, 'first')\"\n    (touchstart)=\"handleOnStart($event, 'first')\"\n  >\n    @if (hasTooltip()) {\n      <div class=\"ax-range-slider-tooltip\">{{ isDual() ? values()[0] : values() }}</div>\n    }\n  </div>\n\n  @if (isDual()) {\n    <div\n      class=\"ax-range-slider-handler\"\n      [ngStyle]=\"AXRangeSliderHandler2()\"\n      (mousedown)=\"handleOnStart($event, 'second')\"\n      (touchstart)=\"handleOnStart($event, 'second')\"\n    >\n      @if (hasTooltip()) {\n        <div class=\"ax-range-slider-tooltip\">{{ values()[1] }}</div>\n      }\n    </div>\n  }\n  @if (hasSnap()) {\n    <div class=\"ax-range-slider-step\" [ngStyle]=\"AXRangeSliderStep()\">\n      @for (item of calculateSnapBar(); track $index) {\n        <div\n          class=\"ax-range-slider-steps\"\n          [ngStyle]=\"\n            isHorizontal() ? { left: getPercantage(item) + '%' } : { top: getPercantage(item) + '%' }\n          \"\n        >\n          @if (hasLable()) {\n            <div class=\"ax-range-slider-label\" [ngStyle]=\"AXRangeLabel()\">\n              {{ item + min() }}\n            </div>\n          }\n        </div>\n      }\n    </div>\n  }\n</div>\n", styles: [":root{--ax-range-slider-base-thickness: .25rem}ax-range-slider{display:flex;align-items:center;justify-content:center;padding:1rem;font-size:small}ax-range-slider .ax-range-slider.ax-orientation-horizontal{position:relative;width:100%;height:calc(var(--ax-range-slider-base-thickness) * 4)}ax-range-slider .ax-range-slider.ax-orientation-horizontal .ax-range-slider-bar{position:absolute;top:50%;left:0;width:100.1%;height:var(--ax-range-slider-base-thickness);transform:translateY(-50%);z-index:20;border-radius:9999rem;background-color:rgb(var(--ax-range-slider-bg));cursor:pointer}ax-range-slider .ax-range-slider.ax-orientation-horizontal .ax-range-slider-highlight{position:absolute;top:50%;height:calc(var(--ax-range-slider-base-thickness) * 3 / 2);transform:translateY(-50%);z-index:20;border-radius:9999rem;background-color:rgb(var(--ax-range-slider-fg))}ax-range-slider .ax-range-slider.ax-orientation-horizontal .ax-range-slider-handler{position:absolute;top:50%;width:calc(var(--ax-range-slider-base-thickness) * 6);height:calc(var(--ax-range-slider-base-thickness) * 6);z-index:20;background-color:rgb(var(--ax-range-slider-fg));border-radius:50%;cursor:pointer;transform:translate(-50%,-50%);transition:box-shadow .1s linear}ax-range-slider .ax-range-slider.ax-orientation-horizontal .ax-range-slider-handler:hover{box-shadow:var(--tw-ring-inset) 0 0 0 calc(.6rem + var(--tw-ring-offset-width)) rgba(var(--ax-range-slider-fg),.25)}ax-range-slider .ax-range-slider.ax-orientation-horizontal .ax-range-slider-handler:active{box-shadow:var(--tw-ring-inset) 0 0 0 calc(.6rem + var(--tw-ring-offset-width)) rgba(var(--ax-range-slider-fg),.25)}ax-range-slider .ax-range-slider.ax-orientation-horizontal .ax-range-slider-tooltip{position:absolute;left:calc(var(--ax-range-slider-base-thickness) * 2.8);top:calc(var(--ax-range-slider-base-thickness) * -2);background-color:rgb(var(--ax-range-slider-fg));color:rgb(var(--ax-range-tooltip-text));padding:5px 10px;border-radius:3px;white-space:nowrap;font-weight:600;transform:translate(-50%,-125%)}ax-range-slider .ax-range-slider.ax-orientation-horizontal .ax-range-slider-tooltip:after{content:\"\";position:absolute;top:calc(var(--ax-range-slider-base-thickness) * 7);left:50%;transform:translate(-50%);border-width:.5rem;border-style:solid;border-color:rgb(var(--ax-range-slider-fg)) transparent transparent transparent}ax-range-slider .ax-range-slider.ax-orientation-horizontal .ax-range-slider-step{position:absolute;display:flex;flex-direction:row;width:100%;z-index:10}ax-range-slider .ax-range-slider.ax-orientation-horizontal .ax-range-slider-step .ax-range-slider-steps{position:absolute;border-left:calc(var(--ax-range-slider-base-thickness) / 2) solid rgb(var(--ax-color-border-default));height:50%}ax-range-slider .ax-range-slider.ax-orientation-horizontal .ax-range-slider-step .ax-range-slider-steps .ax-range-slider-label{position:relative;text-align:center;top:calc(var(--ax-range-slider-base-thickness) * 2);left:-50%}ax-range-slider .ax-range-slider.ax-orientation-vertical{position:relative;width:calc(var(--ax-range-slider-base-thickness) * 4);height:100%}ax-range-slider .ax-range-slider.ax-orientation-vertical .ax-range-slider-bar{position:absolute;top:0;left:50%;width:var(--ax-range-slider-base-thickness);height:100.1%;transform:translate(-50%);z-index:20;border-radius:9999rem;background-color:rgb(var(--ax-range-slider-bg));cursor:pointer}ax-range-slider .ax-range-slider.ax-orientation-vertical .ax-range-slider-highlight{position:absolute;left:50%;width:calc(var(--ax-range-slider-base-thickness) * 3 / 2);transform:translate(-50%);z-index:20;border-radius:9999rem;background-color:rgb(var(--ax-range-slider-fg))}ax-range-slider .ax-range-slider.ax-orientation-vertical .ax-range-slider-handler{position:absolute;left:50%;width:calc(var(--ax-range-slider-base-thickness) * 6);height:calc(var(--ax-range-slider-base-thickness) * 6);z-index:20;background-color:rgb(var(--ax-range-slider-fg));border-radius:50%;cursor:pointer;transform:translate(-50%,-50%);transition:background-color .2s ease}ax-range-slider .ax-range-slider.ax-orientation-vertical .ax-range-slider-handler:active{border:1px solid transparent;box-shadow:var(--tw-ring-inset) 0 0 0 calc(.5rem + var(--tw-ring-offset-width)) rgba(var(--ax-range-slider-fg),.25)}ax-range-slider .ax-range-slider.ax-orientation-vertical .ax-range-slider-tooltip{position:absolute;top:calc(var(--ax-range-slider-base-thickness) * 8.5);left:calc(var(--ax-range-slider-base-thickness) * -8);background-color:rgb(var(--ax-range-slider-fg));color:rgb(var(--ax-range-tooltip-text));padding:5px 10px;border-radius:3px;font-weight:600;white-space:nowrap;transform:translate(-50%,-125%)}ax-range-slider .ax-range-slider.ax-orientation-vertical .ax-range-slider-tooltip:after{content:\"\";position:absolute;top:50%;left:97%;transform:translateY(-50%);border-width:.5rem;border-style:solid;border-color:transparent transparent transparent rgb(var(--ax-range-slider-fg))}ax-range-slider .ax-range-slider.ax-orientation-vertical .ax-range-slider-step{position:absolute;display:flex;flex-direction:column;height:100%;z-index:10}ax-range-slider .ax-range-slider.ax-orientation-vertical .ax-range-slider-step .ax-range-slider-steps{position:absolute;width:50%;border-top:calc(var(--ax-range-slider-base-thickness) / 2) solid rgb(var(--ax-color-border-default))}ax-range-slider .ax-range-slider.ax-orientation-vertical .ax-range-slider-step .ax-range-slider-steps .ax-range-slider-label{position:absolute;left:150%;top:calc(var(--ax-range-slider-base-thickness) * -3)}ax-range-slider.ax-primary-solid{--ax-range-slider-bg: var(--ax-color-primary-200);--ax-range-slider-fg: var(--ax-color-primary-500);--ax-range-tooltip-text: var(--ax-color-primary-fore)}ax-range-slider.ax-secondary-solid{--ax-range-slider-bg: var(--ax-color-secondary-200);--ax-range-slider-fg: var(--ax-color-secondary-500);--ax-range-tooltip-text: var(--ax-color-secondary-fore)}ax-range-slider.ax-success-solid{--ax-range-slider-bg: var(--ax-color-success-200);--ax-range-slider-fg: var(--ax-color-success-500);--ax-range-tooltip-text: var(--ax-color-success-fore)}ax-range-slider.ax-warning-solid{--ax-range-slider-bg: var(--ax-color-warning-200);--ax-range-slider-fg: var(--ax-color-warning-500);--ax-range-tooltip-text: var(--ax-color-warning-fore)}ax-range-slider.ax-danger-solid{--ax-range-slider-bg: var(--ax-color-danger-200);--ax-range-slider-fg: var(--ax-color-danger-500);--ax-range-tooltip-text: var(--ax-color-danger-fore)}ax-range-slider.ax-info-solid{--ax-range-slider-bg: var(--ax-color-info-200);--ax-range-slider-fg: var(--ax-color-info-500);--ax-range-tooltip-text: var(--ax-color-info-fore)}ax-range-slider.ax-state-disabled{opacity:.5;cursor:not-allowed}ax-range-slider.ax-state-readonly{opacity:.75}.ax-dark ax-range-slider.ax-primary-solid{--ax-range-slider-bg: var(--ax-color-primary-700);--ax-range-slider-fg: var(--ax-color-primary-200);--ax-range-tooltip-text: var(--ax-color-primary-fore-tint)}.ax-dark ax-range-slider.ax-secondary-solid{--ax-range-slider-bg: var(--ax-color-secondary-700);--ax-range-slider-fg: var(--ax-color-secondary-200);--ax-range-tooltip-text: var(--ax-color-secondary-fore-tint)}.ax-dark ax-range-slider.ax-success-solid{--ax-range-slider-bg: var(--ax-color-success-700);--ax-range-slider-fg: var(--ax-color-success-200);--ax-range-tooltip-text: var(--ax-color-success-fore-tint)}.ax-dark ax-range-slider.ax-warning-solid{--ax-range-slider-bg: var(--ax-color-warning-700);--ax-range-slider-fg: var(--ax-color-warning-200);--ax-range-tooltip-text: var(--ax-color-warning-fore-tint)}.ax-dark ax-range-slider.ax-danger-solid{--ax-range-slider-bg: var(--ax-color-danger-700);--ax-range-slider-fg: var(--ax-color-danger-200);--ax-range-tooltip-text: var(--ax-color-danger-fore-tint)}.ax-dark ax-range-slider.ax-info-solid{--ax-range-slider-bg: var(--ax-color-info-700);--ax-range-slider-fg: var(--ax-color-info-200);--ax-range-tooltip-text: var(--ax-color-info-fore-tint)}\n"], dependencies: [{ kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], usesInheritance: true, ngImport: i0, template: "@if (correctMinMax()) {\n  <div class=\"ax-range-slider\" [class]=\"'ax-orientation-' + orientation()\">\n    <div class=\"ax-range-slider-bar\" (mousedown)=\"onStartBar($event)\" (touchstart)=\"onStartBar($event)\"></div>\n    <div\n      class=\"ax-range-slider-highlight\"\n      [ngStyle]=\"AXRangeSliderHighlight()\"\n      (mousedown)=\"onStartBar($event)\"\n      (touchstart)=\"onStartBar($event)\"\n    ></div>\n\n    <div\n      class=\"ax-range-slider-handler\"\n      [ngStyle]=\"AXRangeSliderHandler1()\"\n      name=\"first\"\n      (mousedown)=\"onStartHandler($event, 'first')\"\n      (touchstart)=\"onStartHandler($event, 'first')\"\n    >\n      @if (hasTooltip()) {\n        <div class=\"ax-range-slider-tooltip\">{{ isDual() ? values()[0] : values() }}</div>\n      }\n    </div>\n\n    @if (isDual()) {\n      <div\n        class=\"ax-range-slider-handler\"\n        [ngStyle]=\"AXRangeSliderHandler2()\"\n        name=\"second\"\n        (mousedown)=\"onStartHandler($event, 'second')\"\n        (touchstart)=\"onStartHandler($event, 'second')\"\n      >\n        @if (hasTooltip()) {\n          <div class=\"ax-range-slider-tooltip\">{{ values()[1] }}</div>\n        }\n      </div>\n    }\n    @if (hasSnap()) {\n      <div class=\"ax-range-slider-step\" [ngStyle]=\"AXRangeSliderStep()\">\n        @for (item of calculateSnapBar(); track $index) {\n          <div\n            class=\"ax-range-slider-steps\"\n            [ngStyle]=\"\n              isHorizontal() ? { left: getPercantage(item) + '%' } : { bottom: getPercantage(item) + '%' }\n            \"\n          >\n            @if (hasLable()) {\n              <div class=\"ax-range-slider-label\" [ngStyle]=\"AXRangeLabel()\">\n                {{ item + min() }}\n              </div>\n            }\n          </div>\n        }\n      </div>\n    }\n  </div>\n}\n", styles: [":root{--ax-range-slider-base-thickness: .25rem}ax-range-slider{display:flex;align-items:center;justify-content:center;padding:1rem;font-size:small}ax-range-slider .ax-range-slider.ax-orientation-horizontal{position:relative;width:100%;height:calc(var(--ax-range-slider-base-thickness) * 4)}ax-range-slider .ax-range-slider.ax-orientation-horizontal .ax-range-slider-bar{position:absolute;top:50%;left:0;width:100.1%;height:var(--ax-range-slider-base-thickness);transform:translateY(-50%);z-index:20;border-radius:9999rem;background-color:rgb(var(--ax-range-slider-bg));cursor:pointer}ax-range-slider .ax-range-slider.ax-orientation-horizontal .ax-range-slider-highlight{position:absolute;top:50%;height:calc(var(--ax-range-slider-base-thickness) * 3 / 2);transform:translateY(-50%);z-index:20;border-radius:9999rem;background-color:rgb(var(--ax-range-slider-fg));cursor:pointer}ax-range-slider .ax-range-slider.ax-orientation-horizontal .ax-range-slider-handler{position:absolute;top:50%;width:calc(var(--ax-range-slider-base-thickness) * 6);height:calc(var(--ax-range-slider-base-thickness) * 6);z-index:20;background:#fff;border:1px solid gray;border-radius:50%;cursor:pointer;transform:translate(-50%,-50%);transition:box-shadow .1s linear}ax-range-slider .ax-range-slider.ax-orientation-horizontal .ax-range-slider-handler:hover{box-shadow:var(--tw-ring-inset) 0 0 0 calc(.6rem + var(--tw-ring-offset-width)) rgba(var(--ax-range-slider-fg),.25)}ax-range-slider .ax-range-slider.ax-orientation-horizontal .ax-range-slider-handler:active{box-shadow:var(--tw-ring-inset) 0 0 0 calc(.6rem + var(--tw-ring-offset-width)) rgba(var(--ax-range-slider-fg),.25)}ax-range-slider .ax-range-slider.ax-orientation-horizontal .ax-range-slider-tooltip{position:absolute;left:calc(var(--ax-range-slider-base-thickness) * 2.8);top:calc(var(--ax-range-slider-base-thickness) * -2);background-color:rgb(var(--ax-range-slider-fg));color:rgb(var(--ax-range-tooltip-text));padding:5px 10px;border-radius:3px;white-space:nowrap;font-weight:600;transform:translate(-50%,-125%)}ax-range-slider .ax-range-slider.ax-orientation-horizontal .ax-range-slider-tooltip:after{content:\"\";position:absolute;top:calc(var(--ax-range-slider-base-thickness) * 7);left:50%;transform:translate(-50%);border-width:.5rem;border-style:solid;border-color:rgb(var(--ax-range-slider-fg)) transparent transparent transparent}ax-range-slider .ax-range-slider.ax-orientation-horizontal .ax-range-slider-step{position:absolute;display:flex;flex-direction:row;width:100%;z-index:10}ax-range-slider .ax-range-slider.ax-orientation-horizontal .ax-range-slider-step .ax-range-slider-steps{position:absolute;border-left:calc(var(--ax-range-slider-base-thickness) / 2) solid rgb(var(--ax-color-border-default));height:50%}ax-range-slider .ax-range-slider.ax-orientation-horizontal .ax-range-slider-step .ax-range-slider-steps .ax-range-slider-label{position:relative;text-align:center;top:calc(var(--ax-range-slider-base-thickness) * 2);left:-50%}ax-range-slider .ax-range-slider.ax-orientation-vertical{position:relative;width:calc(var(--ax-range-slider-base-thickness) * 4);height:100%}ax-range-slider .ax-range-slider.ax-orientation-vertical .ax-range-slider-bar{position:absolute;top:0;left:50%;width:var(--ax-range-slider-base-thickness);height:100.1%;transform:translate(-50%);z-index:20;border-radius:9999rem;background-color:rgb(var(--ax-range-slider-bg));cursor:pointer}ax-range-slider .ax-range-slider.ax-orientation-vertical .ax-range-slider-highlight{position:absolute;left:50%;width:calc(var(--ax-range-slider-base-thickness) * 3 / 2);transform:translate(-50%);z-index:20;border-radius:9999rem;background-color:rgb(var(--ax-range-slider-fg));cursor:pointer}ax-range-slider .ax-range-slider.ax-orientation-vertical .ax-range-slider-handler{position:absolute;left:50%;width:calc(var(--ax-range-slider-base-thickness) * 6);height:calc(var(--ax-range-slider-base-thickness) * 6);z-index:20;background:#fff;border:1px solid gray;border-radius:50%;cursor:pointer;transform:translate(-50%,-50%);transition:background-color .2s ease}ax-range-slider .ax-range-slider.ax-orientation-vertical .ax-range-slider-handler:active{border:1px solid transparent;box-shadow:var(--tw-ring-inset) 0 0 0 calc(.5rem + var(--tw-ring-offset-width)) rgba(var(--ax-range-slider-fg),.25)}ax-range-slider .ax-range-slider.ax-orientation-vertical .ax-range-slider-tooltip{position:absolute;top:calc(var(--ax-range-slider-base-thickness) * 8.5);left:calc(var(--ax-range-slider-base-thickness) * -8);background-color:rgb(var(--ax-range-slider-fg));color:rgb(var(--ax-range-tooltip-text));padding:5px 10px;border-radius:3px;font-weight:600;white-space:nowrap;transform:translate(-50%,-125%)}ax-range-slider .ax-range-slider.ax-orientation-vertical .ax-range-slider-tooltip:after{content:\"\";position:absolute;top:50%;left:97%;transform:translateY(-50%);border-width:.5rem;border-style:solid;border-color:transparent transparent transparent rgb(var(--ax-range-slider-fg))}ax-range-slider .ax-range-slider.ax-orientation-vertical .ax-range-slider-step{position:absolute;display:flex;flex-direction:column;height:100%;z-index:10}ax-range-slider .ax-range-slider.ax-orientation-vertical .ax-range-slider-step .ax-range-slider-steps{position:absolute;width:50%;border-top:calc(var(--ax-range-slider-base-thickness) / 2) solid rgb(var(--ax-color-border-default))}ax-range-slider .ax-range-slider.ax-orientation-vertical .ax-range-slider-step .ax-range-slider-steps .ax-range-slider-label{position:absolute;left:150%;top:calc(var(--ax-range-slider-base-thickness) * -3)}ax-range-slider.ax-primary-solid{--ax-range-slider-bg: var(--ax-color-primary-200);--ax-range-slider-fg: var(--ax-color-primary-500);--ax-range-tooltip-text: var(--ax-color-primary-fore)}ax-range-slider.ax-secondary-solid{--ax-range-slider-bg: var(--ax-color-secondary-200);--ax-range-slider-fg: var(--ax-color-secondary-500);--ax-range-tooltip-text: var(--ax-color-secondary-fore)}ax-range-slider.ax-success-solid{--ax-range-slider-bg: var(--ax-color-success-200);--ax-range-slider-fg: var(--ax-color-success-500);--ax-range-tooltip-text: var(--ax-color-success-fore)}ax-range-slider.ax-warning-solid{--ax-range-slider-bg: var(--ax-color-warning-200);--ax-range-slider-fg: var(--ax-color-warning-500);--ax-range-tooltip-text: var(--ax-color-warning-fore)}ax-range-slider.ax-danger-solid{--ax-range-slider-bg: var(--ax-color-danger-200);--ax-range-slider-fg: var(--ax-color-danger-500);--ax-range-tooltip-text: var(--ax-color-danger-fore)}ax-range-slider.ax-info-solid{--ax-range-slider-bg: var(--ax-color-info-200);--ax-range-slider-fg: var(--ax-color-info-500);--ax-range-tooltip-text: var(--ax-color-info-fore)}ax-range-slider.ax-state-disabled{opacity:.5;cursor:not-allowed}ax-range-slider.ax-state-readonly{opacity:.75}.ax-dark ax-range-slider.ax-primary-solid{--ax-range-slider-bg: var(--ax-color-primary-700);--ax-range-slider-fg: var(--ax-color-primary-200);--ax-range-tooltip-text: var(--ax-color-primary-fore-tint)}.ax-dark ax-range-slider.ax-secondary-solid{--ax-range-slider-bg: var(--ax-color-secondary-700);--ax-range-slider-fg: var(--ax-color-secondary-200);--ax-range-tooltip-text: var(--ax-color-secondary-fore-tint)}.ax-dark ax-range-slider.ax-success-solid{--ax-range-slider-bg: var(--ax-color-success-700);--ax-range-slider-fg: var(--ax-color-success-200);--ax-range-tooltip-text: var(--ax-color-success-fore-tint)}.ax-dark ax-range-slider.ax-warning-solid{--ax-range-slider-bg: var(--ax-color-warning-700);--ax-range-slider-fg: var(--ax-color-warning-200);--ax-range-tooltip-text: var(--ax-color-warning-fore-tint)}.ax-dark ax-range-slider.ax-danger-solid{--ax-range-slider-bg: var(--ax-color-danger-700);--ax-range-slider-fg: var(--ax-color-danger-200);--ax-range-tooltip-text: var(--ax-color-danger-fore-tint)}.ax-dark ax-range-slider.ax-info-solid{--ax-range-slider-bg: var(--ax-color-info-700);--ax-range-slider-fg: var(--ax-color-info-200);--ax-range-tooltip-text: var(--ax-color-info-fore-tint)}\n"], dependencies: [{ kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXRangeSliderComponent, decorators: [{
             type: Component,
@@ -601,13 +623,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
                             useExisting: forwardRef(() => AXRangeSliderComponent),
                             multi: true,
                         },
-                    ], template: "<div class=\"ax-range-slider\" [class]=\"'ax-orientation-' + orientation()\">\n  <div class=\"ax-range-slider-bar\" (mousedown)=\"onclickBar($event)\" (touchstart)=\"onclickBar($event)\"></div>\n  <div class=\"ax-range-slider-highlight\" [ngStyle]=\"AXRangeSliderHighlight()\"></div>\n\n  <div\n    class=\"ax-range-slider-handler\"\n    [ngStyle]=\"AXRangeSliderHandler1()\"\n    (mousedown)=\"handleOnStart($event, 'first')\"\n    (touchstart)=\"handleOnStart($event, 'first')\"\n  >\n    @if (hasTooltip()) {\n      <div class=\"ax-range-slider-tooltip\">{{ isDual() ? values()[0] : values() }}</div>\n    }\n  </div>\n\n  @if (isDual()) {\n    <div\n      class=\"ax-range-slider-handler\"\n      [ngStyle]=\"AXRangeSliderHandler2()\"\n      (mousedown)=\"handleOnStart($event, 'second')\"\n      (touchstart)=\"handleOnStart($event, 'second')\"\n    >\n      @if (hasTooltip()) {\n        <div class=\"ax-range-slider-tooltip\">{{ values()[1] }}</div>\n      }\n    </div>\n  }\n  @if (hasSnap()) {\n    <div class=\"ax-range-slider-step\" [ngStyle]=\"AXRangeSliderStep()\">\n      @for (item of calculateSnapBar(); track $index) {\n        <div\n          class=\"ax-range-slider-steps\"\n          [ngStyle]=\"\n            isHorizontal() ? { left: getPercantage(item) + '%' } : { top: getPercantage(item) + '%' }\n          \"\n        >\n          @if (hasLable()) {\n            <div class=\"ax-range-slider-label\" [ngStyle]=\"AXRangeLabel()\">\n              {{ item + min() }}\n            </div>\n          }\n        </div>\n      }\n    </div>\n  }\n</div>\n", styles: [":root{--ax-range-slider-base-thickness: .25rem}ax-range-slider{display:flex;align-items:center;justify-content:center;padding:1rem;font-size:small}ax-range-slider .ax-range-slider.ax-orientation-horizontal{position:relative;width:100%;height:calc(var(--ax-range-slider-base-thickness) * 4)}ax-range-slider .ax-range-slider.ax-orientation-horizontal .ax-range-slider-bar{position:absolute;top:50%;left:0;width:100.1%;height:var(--ax-range-slider-base-thickness);transform:translateY(-50%);z-index:20;border-radius:9999rem;background-color:rgb(var(--ax-range-slider-bg));cursor:pointer}ax-range-slider .ax-range-slider.ax-orientation-horizontal .ax-range-slider-highlight{position:absolute;top:50%;height:calc(var(--ax-range-slider-base-thickness) * 3 / 2);transform:translateY(-50%);z-index:20;border-radius:9999rem;background-color:rgb(var(--ax-range-slider-fg))}ax-range-slider .ax-range-slider.ax-orientation-horizontal .ax-range-slider-handler{position:absolute;top:50%;width:calc(var(--ax-range-slider-base-thickness) * 6);height:calc(var(--ax-range-slider-base-thickness) * 6);z-index:20;background-color:rgb(var(--ax-range-slider-fg));border-radius:50%;cursor:pointer;transform:translate(-50%,-50%);transition:box-shadow .1s linear}ax-range-slider .ax-range-slider.ax-orientation-horizontal .ax-range-slider-handler:hover{box-shadow:var(--tw-ring-inset) 0 0 0 calc(.6rem + var(--tw-ring-offset-width)) rgba(var(--ax-range-slider-fg),.25)}ax-range-slider .ax-range-slider.ax-orientation-horizontal .ax-range-slider-handler:active{box-shadow:var(--tw-ring-inset) 0 0 0 calc(.6rem + var(--tw-ring-offset-width)) rgba(var(--ax-range-slider-fg),.25)}ax-range-slider .ax-range-slider.ax-orientation-horizontal .ax-range-slider-tooltip{position:absolute;left:calc(var(--ax-range-slider-base-thickness) * 2.8);top:calc(var(--ax-range-slider-base-thickness) * -2);background-color:rgb(var(--ax-range-slider-fg));color:rgb(var(--ax-range-tooltip-text));padding:5px 10px;border-radius:3px;white-space:nowrap;font-weight:600;transform:translate(-50%,-125%)}ax-range-slider .ax-range-slider.ax-orientation-horizontal .ax-range-slider-tooltip:after{content:\"\";position:absolute;top:calc(var(--ax-range-slider-base-thickness) * 7);left:50%;transform:translate(-50%);border-width:.5rem;border-style:solid;border-color:rgb(var(--ax-range-slider-fg)) transparent transparent transparent}ax-range-slider .ax-range-slider.ax-orientation-horizontal .ax-range-slider-step{position:absolute;display:flex;flex-direction:row;width:100%;z-index:10}ax-range-slider .ax-range-slider.ax-orientation-horizontal .ax-range-slider-step .ax-range-slider-steps{position:absolute;border-left:calc(var(--ax-range-slider-base-thickness) / 2) solid rgb(var(--ax-color-border-default));height:50%}ax-range-slider .ax-range-slider.ax-orientation-horizontal .ax-range-slider-step .ax-range-slider-steps .ax-range-slider-label{position:relative;text-align:center;top:calc(var(--ax-range-slider-base-thickness) * 2);left:-50%}ax-range-slider .ax-range-slider.ax-orientation-vertical{position:relative;width:calc(var(--ax-range-slider-base-thickness) * 4);height:100%}ax-range-slider .ax-range-slider.ax-orientation-vertical .ax-range-slider-bar{position:absolute;top:0;left:50%;width:var(--ax-range-slider-base-thickness);height:100.1%;transform:translate(-50%);z-index:20;border-radius:9999rem;background-color:rgb(var(--ax-range-slider-bg));cursor:pointer}ax-range-slider .ax-range-slider.ax-orientation-vertical .ax-range-slider-highlight{position:absolute;left:50%;width:calc(var(--ax-range-slider-base-thickness) * 3 / 2);transform:translate(-50%);z-index:20;border-radius:9999rem;background-color:rgb(var(--ax-range-slider-fg))}ax-range-slider .ax-range-slider.ax-orientation-vertical .ax-range-slider-handler{position:absolute;left:50%;width:calc(var(--ax-range-slider-base-thickness) * 6);height:calc(var(--ax-range-slider-base-thickness) * 6);z-index:20;background-color:rgb(var(--ax-range-slider-fg));border-radius:50%;cursor:pointer;transform:translate(-50%,-50%);transition:background-color .2s ease}ax-range-slider .ax-range-slider.ax-orientation-vertical .ax-range-slider-handler:active{border:1px solid transparent;box-shadow:var(--tw-ring-inset) 0 0 0 calc(.5rem + var(--tw-ring-offset-width)) rgba(var(--ax-range-slider-fg),.25)}ax-range-slider .ax-range-slider.ax-orientation-vertical .ax-range-slider-tooltip{position:absolute;top:calc(var(--ax-range-slider-base-thickness) * 8.5);left:calc(var(--ax-range-slider-base-thickness) * -8);background-color:rgb(var(--ax-range-slider-fg));color:rgb(var(--ax-range-tooltip-text));padding:5px 10px;border-radius:3px;font-weight:600;white-space:nowrap;transform:translate(-50%,-125%)}ax-range-slider .ax-range-slider.ax-orientation-vertical .ax-range-slider-tooltip:after{content:\"\";position:absolute;top:50%;left:97%;transform:translateY(-50%);border-width:.5rem;border-style:solid;border-color:transparent transparent transparent rgb(var(--ax-range-slider-fg))}ax-range-slider .ax-range-slider.ax-orientation-vertical .ax-range-slider-step{position:absolute;display:flex;flex-direction:column;height:100%;z-index:10}ax-range-slider .ax-range-slider.ax-orientation-vertical .ax-range-slider-step .ax-range-slider-steps{position:absolute;width:50%;border-top:calc(var(--ax-range-slider-base-thickness) / 2) solid rgb(var(--ax-color-border-default))}ax-range-slider .ax-range-slider.ax-orientation-vertical .ax-range-slider-step .ax-range-slider-steps .ax-range-slider-label{position:absolute;left:150%;top:calc(var(--ax-range-slider-base-thickness) * -3)}ax-range-slider.ax-primary-solid{--ax-range-slider-bg: var(--ax-color-primary-200);--ax-range-slider-fg: var(--ax-color-primary-500);--ax-range-tooltip-text: var(--ax-color-primary-fore)}ax-range-slider.ax-secondary-solid{--ax-range-slider-bg: var(--ax-color-secondary-200);--ax-range-slider-fg: var(--ax-color-secondary-500);--ax-range-tooltip-text: var(--ax-color-secondary-fore)}ax-range-slider.ax-success-solid{--ax-range-slider-bg: var(--ax-color-success-200);--ax-range-slider-fg: var(--ax-color-success-500);--ax-range-tooltip-text: var(--ax-color-success-fore)}ax-range-slider.ax-warning-solid{--ax-range-slider-bg: var(--ax-color-warning-200);--ax-range-slider-fg: var(--ax-color-warning-500);--ax-range-tooltip-text: var(--ax-color-warning-fore)}ax-range-slider.ax-danger-solid{--ax-range-slider-bg: var(--ax-color-danger-200);--ax-range-slider-fg: var(--ax-color-danger-500);--ax-range-tooltip-text: var(--ax-color-danger-fore)}ax-range-slider.ax-info-solid{--ax-range-slider-bg: var(--ax-color-info-200);--ax-range-slider-fg: var(--ax-color-info-500);--ax-range-tooltip-text: var(--ax-color-info-fore)}ax-range-slider.ax-state-disabled{opacity:.5;cursor:not-allowed}ax-range-slider.ax-state-readonly{opacity:.75}.ax-dark ax-range-slider.ax-primary-solid{--ax-range-slider-bg: var(--ax-color-primary-700);--ax-range-slider-fg: var(--ax-color-primary-200);--ax-range-tooltip-text: var(--ax-color-primary-fore-tint)}.ax-dark ax-range-slider.ax-secondary-solid{--ax-range-slider-bg: var(--ax-color-secondary-700);--ax-range-slider-fg: var(--ax-color-secondary-200);--ax-range-tooltip-text: var(--ax-color-secondary-fore-tint)}.ax-dark ax-range-slider.ax-success-solid{--ax-range-slider-bg: var(--ax-color-success-700);--ax-range-slider-fg: var(--ax-color-success-200);--ax-range-tooltip-text: var(--ax-color-success-fore-tint)}.ax-dark ax-range-slider.ax-warning-solid{--ax-range-slider-bg: var(--ax-color-warning-700);--ax-range-slider-fg: var(--ax-color-warning-200);--ax-range-tooltip-text: var(--ax-color-warning-fore-tint)}.ax-dark ax-range-slider.ax-danger-solid{--ax-range-slider-bg: var(--ax-color-danger-700);--ax-range-slider-fg: var(--ax-color-danger-200);--ax-range-tooltip-text: var(--ax-color-danger-fore-tint)}.ax-dark ax-range-slider.ax-info-solid{--ax-range-slider-bg: var(--ax-color-info-700);--ax-range-slider-fg: var(--ax-color-info-200);--ax-range-tooltip-text: var(--ax-color-info-fore-tint)}\n"] }]
+                    ], template: "@if (correctMinMax()) {\n  <div class=\"ax-range-slider\" [class]=\"'ax-orientation-' + orientation()\">\n    <div class=\"ax-range-slider-bar\" (mousedown)=\"onStartBar($event)\" (touchstart)=\"onStartBar($event)\"></div>\n    <div\n      class=\"ax-range-slider-highlight\"\n      [ngStyle]=\"AXRangeSliderHighlight()\"\n      (mousedown)=\"onStartBar($event)\"\n      (touchstart)=\"onStartBar($event)\"\n    ></div>\n\n    <div\n      class=\"ax-range-slider-handler\"\n      [ngStyle]=\"AXRangeSliderHandler1()\"\n      name=\"first\"\n      (mousedown)=\"onStartHandler($event, 'first')\"\n      (touchstart)=\"onStartHandler($event, 'first')\"\n    >\n      @if (hasTooltip()) {\n        <div class=\"ax-range-slider-tooltip\">{{ isDual() ? values()[0] : values() }}</div>\n      }\n    </div>\n\n    @if (isDual()) {\n      <div\n        class=\"ax-range-slider-handler\"\n        [ngStyle]=\"AXRangeSliderHandler2()\"\n        name=\"second\"\n        (mousedown)=\"onStartHandler($event, 'second')\"\n        (touchstart)=\"onStartHandler($event, 'second')\"\n      >\n        @if (hasTooltip()) {\n          <div class=\"ax-range-slider-tooltip\">{{ values()[1] }}</div>\n        }\n      </div>\n    }\n    @if (hasSnap()) {\n      <div class=\"ax-range-slider-step\" [ngStyle]=\"AXRangeSliderStep()\">\n        @for (item of calculateSnapBar(); track $index) {\n          <div\n            class=\"ax-range-slider-steps\"\n            [ngStyle]=\"\n              isHorizontal() ? { left: getPercantage(item) + '%' } : { bottom: getPercantage(item) + '%' }\n            \"\n          >\n            @if (hasLable()) {\n              <div class=\"ax-range-slider-label\" [ngStyle]=\"AXRangeLabel()\">\n                {{ item + min() }}\n              </div>\n            }\n          </div>\n        }\n      </div>\n    }\n  </div>\n}\n", styles: [":root{--ax-range-slider-base-thickness: .25rem}ax-range-slider{display:flex;align-items:center;justify-content:center;padding:1rem;font-size:small}ax-range-slider .ax-range-slider.ax-orientation-horizontal{position:relative;width:100%;height:calc(var(--ax-range-slider-base-thickness) * 4)}ax-range-slider .ax-range-slider.ax-orientation-horizontal .ax-range-slider-bar{position:absolute;top:50%;left:0;width:100.1%;height:var(--ax-range-slider-base-thickness);transform:translateY(-50%);z-index:20;border-radius:9999rem;background-color:rgb(var(--ax-range-slider-bg));cursor:pointer}ax-range-slider .ax-range-slider.ax-orientation-horizontal .ax-range-slider-highlight{position:absolute;top:50%;height:calc(var(--ax-range-slider-base-thickness) * 3 / 2);transform:translateY(-50%);z-index:20;border-radius:9999rem;background-color:rgb(var(--ax-range-slider-fg));cursor:pointer}ax-range-slider .ax-range-slider.ax-orientation-horizontal .ax-range-slider-handler{position:absolute;top:50%;width:calc(var(--ax-range-slider-base-thickness) * 6);height:calc(var(--ax-range-slider-base-thickness) * 6);z-index:20;background:#fff;border:1px solid gray;border-radius:50%;cursor:pointer;transform:translate(-50%,-50%);transition:box-shadow .1s linear}ax-range-slider .ax-range-slider.ax-orientation-horizontal .ax-range-slider-handler:hover{box-shadow:var(--tw-ring-inset) 0 0 0 calc(.6rem + var(--tw-ring-offset-width)) rgba(var(--ax-range-slider-fg),.25)}ax-range-slider .ax-range-slider.ax-orientation-horizontal .ax-range-slider-handler:active{box-shadow:var(--tw-ring-inset) 0 0 0 calc(.6rem + var(--tw-ring-offset-width)) rgba(var(--ax-range-slider-fg),.25)}ax-range-slider .ax-range-slider.ax-orientation-horizontal .ax-range-slider-tooltip{position:absolute;left:calc(var(--ax-range-slider-base-thickness) * 2.8);top:calc(var(--ax-range-slider-base-thickness) * -2);background-color:rgb(var(--ax-range-slider-fg));color:rgb(var(--ax-range-tooltip-text));padding:5px 10px;border-radius:3px;white-space:nowrap;font-weight:600;transform:translate(-50%,-125%)}ax-range-slider .ax-range-slider.ax-orientation-horizontal .ax-range-slider-tooltip:after{content:\"\";position:absolute;top:calc(var(--ax-range-slider-base-thickness) * 7);left:50%;transform:translate(-50%);border-width:.5rem;border-style:solid;border-color:rgb(var(--ax-range-slider-fg)) transparent transparent transparent}ax-range-slider .ax-range-slider.ax-orientation-horizontal .ax-range-slider-step{position:absolute;display:flex;flex-direction:row;width:100%;z-index:10}ax-range-slider .ax-range-slider.ax-orientation-horizontal .ax-range-slider-step .ax-range-slider-steps{position:absolute;border-left:calc(var(--ax-range-slider-base-thickness) / 2) solid rgb(var(--ax-color-border-default));height:50%}ax-range-slider .ax-range-slider.ax-orientation-horizontal .ax-range-slider-step .ax-range-slider-steps .ax-range-slider-label{position:relative;text-align:center;top:calc(var(--ax-range-slider-base-thickness) * 2);left:-50%}ax-range-slider .ax-range-slider.ax-orientation-vertical{position:relative;width:calc(var(--ax-range-slider-base-thickness) * 4);height:100%}ax-range-slider .ax-range-slider.ax-orientation-vertical .ax-range-slider-bar{position:absolute;top:0;left:50%;width:var(--ax-range-slider-base-thickness);height:100.1%;transform:translate(-50%);z-index:20;border-radius:9999rem;background-color:rgb(var(--ax-range-slider-bg));cursor:pointer}ax-range-slider .ax-range-slider.ax-orientation-vertical .ax-range-slider-highlight{position:absolute;left:50%;width:calc(var(--ax-range-slider-base-thickness) * 3 / 2);transform:translate(-50%);z-index:20;border-radius:9999rem;background-color:rgb(var(--ax-range-slider-fg));cursor:pointer}ax-range-slider .ax-range-slider.ax-orientation-vertical .ax-range-slider-handler{position:absolute;left:50%;width:calc(var(--ax-range-slider-base-thickness) * 6);height:calc(var(--ax-range-slider-base-thickness) * 6);z-index:20;background:#fff;border:1px solid gray;border-radius:50%;cursor:pointer;transform:translate(-50%,-50%);transition:background-color .2s ease}ax-range-slider .ax-range-slider.ax-orientation-vertical .ax-range-slider-handler:active{border:1px solid transparent;box-shadow:var(--tw-ring-inset) 0 0 0 calc(.5rem + var(--tw-ring-offset-width)) rgba(var(--ax-range-slider-fg),.25)}ax-range-slider .ax-range-slider.ax-orientation-vertical .ax-range-slider-tooltip{position:absolute;top:calc(var(--ax-range-slider-base-thickness) * 8.5);left:calc(var(--ax-range-slider-base-thickness) * -8);background-color:rgb(var(--ax-range-slider-fg));color:rgb(var(--ax-range-tooltip-text));padding:5px 10px;border-radius:3px;font-weight:600;white-space:nowrap;transform:translate(-50%,-125%)}ax-range-slider .ax-range-slider.ax-orientation-vertical .ax-range-slider-tooltip:after{content:\"\";position:absolute;top:50%;left:97%;transform:translateY(-50%);border-width:.5rem;border-style:solid;border-color:transparent transparent transparent rgb(var(--ax-range-slider-fg))}ax-range-slider .ax-range-slider.ax-orientation-vertical .ax-range-slider-step{position:absolute;display:flex;flex-direction:column;height:100%;z-index:10}ax-range-slider .ax-range-slider.ax-orientation-vertical .ax-range-slider-step .ax-range-slider-steps{position:absolute;width:50%;border-top:calc(var(--ax-range-slider-base-thickness) / 2) solid rgb(var(--ax-color-border-default))}ax-range-slider .ax-range-slider.ax-orientation-vertical .ax-range-slider-step .ax-range-slider-steps .ax-range-slider-label{position:absolute;left:150%;top:calc(var(--ax-range-slider-base-thickness) * -3)}ax-range-slider.ax-primary-solid{--ax-range-slider-bg: var(--ax-color-primary-200);--ax-range-slider-fg: var(--ax-color-primary-500);--ax-range-tooltip-text: var(--ax-color-primary-fore)}ax-range-slider.ax-secondary-solid{--ax-range-slider-bg: var(--ax-color-secondary-200);--ax-range-slider-fg: var(--ax-color-secondary-500);--ax-range-tooltip-text: var(--ax-color-secondary-fore)}ax-range-slider.ax-success-solid{--ax-range-slider-bg: var(--ax-color-success-200);--ax-range-slider-fg: var(--ax-color-success-500);--ax-range-tooltip-text: var(--ax-color-success-fore)}ax-range-slider.ax-warning-solid{--ax-range-slider-bg: var(--ax-color-warning-200);--ax-range-slider-fg: var(--ax-color-warning-500);--ax-range-tooltip-text: var(--ax-color-warning-fore)}ax-range-slider.ax-danger-solid{--ax-range-slider-bg: var(--ax-color-danger-200);--ax-range-slider-fg: var(--ax-color-danger-500);--ax-range-tooltip-text: var(--ax-color-danger-fore)}ax-range-slider.ax-info-solid{--ax-range-slider-bg: var(--ax-color-info-200);--ax-range-slider-fg: var(--ax-color-info-500);--ax-range-tooltip-text: var(--ax-color-info-fore)}ax-range-slider.ax-state-disabled{opacity:.5;cursor:not-allowed}ax-range-slider.ax-state-readonly{opacity:.75}.ax-dark ax-range-slider.ax-primary-solid{--ax-range-slider-bg: var(--ax-color-primary-700);--ax-range-slider-fg: var(--ax-color-primary-200);--ax-range-tooltip-text: var(--ax-color-primary-fore-tint)}.ax-dark ax-range-slider.ax-secondary-solid{--ax-range-slider-bg: var(--ax-color-secondary-700);--ax-range-slider-fg: var(--ax-color-secondary-200);--ax-range-tooltip-text: var(--ax-color-secondary-fore-tint)}.ax-dark ax-range-slider.ax-success-solid{--ax-range-slider-bg: var(--ax-color-success-700);--ax-range-slider-fg: var(--ax-color-success-200);--ax-range-tooltip-text: var(--ax-color-success-fore-tint)}.ax-dark ax-range-slider.ax-warning-solid{--ax-range-slider-bg: var(--ax-color-warning-700);--ax-range-slider-fg: var(--ax-color-warning-200);--ax-range-tooltip-text: var(--ax-color-warning-fore-tint)}.ax-dark ax-range-slider.ax-danger-solid{--ax-range-slider-bg: var(--ax-color-danger-700);--ax-range-slider-fg: var(--ax-color-danger-200);--ax-range-tooltip-text: var(--ax-color-danger-fore-tint)}.ax-dark ax-range-slider.ax-info-solid{--ax-range-slider-bg: var(--ax-color-info-700);--ax-range-slider-fg: var(--ax-color-info-200);--ax-range-tooltip-text: var(--ax-color-info-fore-tint)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { onWheel: [{
                 type: HostListener,
                 args: ['wheel', ['$event']]
             }], __hostClass: [{
                 type: HostBinding,
                 args: ['class']
+            }], onNgModelChange: [{
+                type: HostListener,
+                args: ['onValueChanged', ['$event']]
             }] } });
 
 class AXRangeSliderModule {