From 9f4b01e17fd2f5e742d32bc9e080b6b394c43d37 Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandyscarney@users.noreply.github.com>
Date: Fri, 21 Aug 2020 13:57:13 -0400
Subject: [PATCH] fix(range): properly display stacked labels in an item with a
 range (#21944)

fixes #21625
---
 core/src/components/label/label.tsx           | 19 ++++++++++++++-----
 .../components/range/test/basic/index.html    |  1 +
 2 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/core/src/components/label/label.tsx b/core/src/components/label/label.tsx
index 05fbf41851..2bf557004f 100644
--- a/core/src/components/label/label.tsx
+++ b/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,11 +60,17 @@ export class Label implements ComponentInterface {
   }
 
   private emitStyle() {
-    const position = this.position;
-    this.ionStyle.emit({
-      'label': true,
-      [`label-${position}`]: position !== undefined
-    });
+    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() {
diff --git a/core/src/components/range/test/basic/index.html b/core/src/components/range/test/basic/index.html
index 5c15d0f815..c1a1343cb7 100644
--- a/core/src/components/range/test/basic/index.html
+++ b/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>