fix(range): properly display stacked labels in an item with a range (#21944)

fixes #21625

core/src/components/label/label.tsx

@@ -16,6 +16,8 @@ import { createColorClasses } from '../../utils/theme';
   scoped: true
 })
 export class Label implements ComponentInterface {
+  private inRange = false;
+
   @Element() el!: HTMLElement;
 
   /**
@@ -39,6 +41,7 @@ export class Label implements ComponentInterface {
   @State() noAnimate = false;
 
   componentWillLoad() {
+    this.inRange = !!this.el.closest('ion-range');
     this.noAnimate = (this.position === 'floating');
     this.emitStyle();
   }
@@ -57,12 +60,18 @@ export class Label implements ComponentInterface {
   }
 
   private emitStyle() {
-    const position = this.position;
+    const { inRange, position } = this;
+
+    // If the label is inside of a range we don't want
+    // to override the classes added by the label that
+    // is a direct child of the item
+    if (!inRange) {
       this.ionStyle.emit({
         'label': true,
         [`label-${position}`]: position !== undefined
       });
     }
+  }
 
   render() {
     const position = this.position;

core/src/components/range/test/basic/index.html

@@ -85,6 +85,7 @@
           </ion-range>
         </ion-item>
         <ion-item>
+          <ion-label position="stacked">Stacked Label</ion-label>
           <ion-range value="40">
             <ion-label slot="start">Start</ion-label>
             <ion-label slot="end">End</ion-label>