Avoid infinite calls in range sliders

src/app/shared/cart-card/cart-card.component.ts

@@ -105,95 +105,6 @@ export class CartCardComponent implements OnInit {
     }
   }
 
-  /*async addProductToCart(productOff:Product| undefined,options:boolean){
-    //this.localStorage.addCartItem(productOff as Product);
-    if(options==true){
-      console.log('termschecked:')
-      console.log(this.selected_terms)
-      if(productOff!= undefined && productOff?.productOfferingPrice != undefined){
-        let prodOptions = {
-          "id": productOff?.id,
-          "name": productOff?.name,
-          "image": this.getProductImage(),
-          "href": productOff.href,
-          "options": {
-            "characteristics": this.selected_chars,
-            "pricing": this.selected_price
-          },
-          "termsAccepted": this.selected_terms
-        }
-        this.lastAddedProd=prodOptions;
-      await this.cartService.addItemShoppingCart(prodOptions).subscribe({
-        next: data => {
-            console.log(data)
-            console.log('Update successful');
-        },
-        error: error => {
-            console.error('There was an error while updating!', error);
-            if(error.error.error){
-              console.log(error)
-              this.errorMessage='Error: '+error.error.error;
-            } else {
-              this.errorMessage='There was an error while adding item to the cart!';
-            }
-            this.showError=true;
-            setTimeout(() => {
-              this.showError = false;
-            }, 3000);
-        }
-      });
-    }
-    } else {
-      if(productOff!= undefined && productOff?.productOfferingPrice != undefined){
-        let prodOptions = {
-          "id": productOff?.id,
-          "name": productOff?.name,
-          "image": this.getProductImage(),
-          "href": productOff.href,
-          "options": {
-            "characteristics": this.selected_chars,
-            "pricing": this.selected_price
-          },
-          "termsAccepted": true
-        }
-        this.lastAddedProd=prodOptions;
-      await this.cartService.addItemShoppingCart(prodOptions).subscribe({
-        next: data => {
-            console.log(data)
-            console.log('Update successful');
-        },
-        error: error => {
-            console.error('There was an error while updating!', error);
-            if(error.error.error){
-              console.log(error)
-              this.errorMessage='Error: '+error.error.error;
-            } else {
-              this.errorMessage='There was an error while adding item to the cart!';
-            }
-            this.showError=true;
-            setTimeout(() => {
-              this.showError = false;
-            }, 3000);
-        }
-      });
-    }
-    }
-    if(productOff!== undefined){
-      this.eventMessage.emitAddedCartItem(productOff as cartProduct);
-      this.eventMessage.emitCloseCartCard(productOff as cartProduct);
-      this.check_char=false;
-      this.check_terms=false;
-      this.check_prices=false;
-      this.selected_chars=[];
-      this.selected_price={};
-      this.selected_terms=false;
-      this.cdr.detectChanges();
-    }
-
-    this.cdr.detectChanges();
-  }
-*/
-
   async addProductToCart(productOff: Product | undefined, options: boolean) {
     if (!productOff || !productOff.productOfferingPrice) return;
 
@@ -399,7 +310,7 @@ export class CartCardComponent implements OnInit {
       return str.split(/\s+/).some(word => word.length > threshold);
     } else {
       return false
-    }   
+    }
   }
 
 }

src/app/shared/characteristic/characteristic.component.html

@@ -16,6 +16,7 @@ <h4 class="text-lg font-semibold text-primary-100 dark:text-gray-300">{{ charact
           [min]="getSliderRange()?.min"
           [max]="getSliderRange()?.max"
           [formControl]="control"
+          (change)="onControlCommit()"
           class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700"
         />
         <span class="min-w-24 flex justify-center text-sm text-gray-600 dark:text-gray-400">{{ control.value }} {{ getUnit() }}</span>
@@ -24,6 +25,7 @@ <h4 class="text-lg font-semibold text-primary-100 dark:text-gray-300">{{ charact
       <div>
         <select
           [formControl]="control"
+          (change)="onControlCommit()"
           class="block w-full px-3 py-2 border border-gray-300 rounded-lg text-sm shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-300 dark:bg-gray-700 dark:text-gray-300 dark:border-gray-600"
         >
           <option

src/app/shared/characteristic/characteristic.component.ts

@@ -56,14 +56,16 @@ export class CharacteristicComponent implements OnInit {
       );
     }
 
-    // Emit initial value
-    this.control.valueChanges.subscribe((value) => {
-      if (!this.readOnly) { // Respetar el estado de solo lectura
-        this.valueChange.emit({
-          characteristicId: this.characteristic.id,
-          selectedValue: value,
-        });
-      }
+  }
+
+  onControlCommit(): void {
+    if (this.readOnly) {
+      return;
+    }
+
+    this.valueChange.emit({
+      characteristicId: this.characteristic.id,
+      selectedValue: this.control.value,
     });
   }