fix(range): range knob does not overflow in item

core/src/components/range/range.ios.scss

@@ -21,6 +21,32 @@
   @include padding($range-ios-padding-vertical, $range-ios-padding-horizontal);
 }
 
+// TODO FW-2997 Remove the .legacy-range selector
+:host(.in-item:not(.range-has-label):not(.range-has-start-icon):not(.range-has-end-icon):not(.legacy-range)) .range-slider {
+  // Add margins on both sides of the range slider
+  // to prevent the range knob from being cut off.
+  @include margin(null, $range-ios-padding-horizontal);
+}
+
+// TODO FW-2997 Remove the .legacy-range selector
+:host(.in-item.range-has-label.range-label-placement-start:not(.legacy-range):not(.range-has-end-icon)) .range-slider,
+:host(.in-item.range-has-start-icon:not(.legacy-range):not(.range-has-end-icon)) .range-slider {
+  // Only add margin to the right if the range has
+  // a label to the left or a start icon.
+  // Do not add right margin if the range has an end icon.
+  @include margin(null, $range-ios-padding-horizontal, null, 0);
+}
+
+// TODO FW-2997 Remove the .legacy-range selector
+:host(.in-item.range-has-label.range-label-placement-end:not(.legacy-range):not(.range-has-start-icon)) .range-slider,
+:host(.in-item.range-has-end-icon:not(.legacy-range):not(.range-has-start-icon)) .range-slider {
+  // Only add margin to the left if the range has
+  // a label to the right or an end icon.
+  // Do not add left margin if the range has a start icon.
+  @include margin(null, 0, null, $range-ios-padding-horizontal);
+}
+
+
 :host(.ion-color) .range-bar-active,
 :host(.ion-color) .range-tick-active {
   background: current-color(base);

core/src/components/range/range.md.scss

@@ -30,6 +30,31 @@
   @include padding($range-md-padding-vertical, $range-md-padding-horizontal);
 }
 
+// TODO FW-2997 Remove the .legacy-range selector
+:host(.in-item:not(.range-has-label):not(.range-has-start-icon):not(.range-has-end-icon):not(.legacy-range)) .range-slider {
+  // Add margins on both sides of the range slider
+  // to prevent the range knob from being cut off.
+  @include margin(null, $range-md-padding-horizontal);
+}
+
+// TODO FW-2997 Remove the .legacy-range selector
+:host(.in-item.range-has-label.range-label-placement-start:not(.legacy-range):not(.range-has-end-icon)) .range-slider,
+:host(.in-item.range-has-start-icon:not(.legacy-range):not(.range-has-end-icon)) .range-slider {
+  // Only add margin to the right if the range has
+  // a label to the left or a start icon.
+  // Do not add right margin if the range has an end icon.
+  @include margin(null, $range-md-padding-horizontal, null, 0);
+}
+
+// TODO FW-2997 Remove the .legacy-range selector
+:host(.in-item.range-has-label.range-label-placement-end:not(.legacy-range):not(.range-has-start-icon)) .range-slider,
+:host(.in-item.range-has-end-icon:not(.legacy-range):not(.range-has-start-icon)) .range-slider {
+  // Only add margin to the left if the range has
+  // a label to the right or an end icon.
+  // Do not add left margin if the range has a start icon.
+  @include margin(null, 0, null, $range-md-padding-horizontal);
+}
+
 :host(.ion-color) .range-bar {
   background: current-color(base, 0.26);
 }
@@ -53,7 +78,12 @@
 }
 
 :host(.range-has-pin) {
-  @include padding($range-md-padding-vertical + $range-md-pin-font-size + $range-md-pin-padding-vertical, null, null, null);
+  @include padding(
+    $range-md-padding-vertical + $range-md-pin-font-size + $range-md-pin-padding-vertical,
+    null,
+    null,
+    null
+  );
 }
 
 .range-bar-active {

core/src/components/range/range.md.vars.scss

@@ -7,7 +7,7 @@
 $range-md-padding-vertical:                  8px !default;
 
 /// @prop - Padding start/end of the range
-$range-md-padding-horizontal:                14px !default;
+$range-md-padding-horizontal:                18px !default;
 
 /// @prop - Height of the range slider
 $range-md-slider-height:                     42px !default;

core/src/components/range/range.tsx

@@ -610,7 +610,7 @@ Developers can dismiss this warning by removing their usage of the "legacy" prop
   }
 
   private renderRange() {
-    const { disabled, el, rangeId, pin, pressedKnob, labelPlacement, label } = this;
+    const { disabled, el, rangeId, pin, pressedKnob, labelPlacement, hasLabel, label, hasStartIcon, hasEndIcon } = this;
 
     const mode = getIonMode(this);
 
@@ -624,6 +624,9 @@ Developers can dismiss this warning by removing their usage of the "legacy" prop
         class={createColorClasses(this.color, {
           [mode]: true,
           'in-item': hostContext('ion-item', el),
+          'range-has-label': hasLabel,
+          'range-has-start-icon': hasStartIcon,
+          'range-has-end-icon': hasEndIcon,
           'range-disabled': disabled,
           'range-pressed': pressedKnob !== undefined,
           'range-has-pin': pin,
@@ -653,6 +656,14 @@ Developers can dismiss this warning by removing their usage of the "legacy" prop
     return this.label !== undefined || this.el.querySelector('[slot="label"]') !== null;
   }
 
+  private get hasStartIcon() {
+    return this.el.querySelector('[slot="start"]') !== null;
+  }
+
+  private get hasEndIcon() {
+    return this.el.querySelector('[slot="end"]') !== null;
+  }
+
   private renderRangeSlider() {
     const {
       min,

core/src/components/range/test/a11y/range.e2e.ts

@@ -20,7 +20,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, co
       await page.setContent(
         `<ion-app>
           <ion-content>
-            <ion-range min="0" max="100" value="80" legacy="true"></ion-range>
+            <ion-range aria-label="Range" min="0" max="100" value="80"></ion-range>
           </ion-content>
         </ion-app>
           `,
@@ -54,7 +54,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
       await page.setContent(
         `<ion-app>
           <ion-content>
-            <ion-range min="0" max="100" value="50" pin="true" legacy="true"></ion-range>
+            <ion-range aria-label="Range" min="0" max="100" value="50" pin="true"></ion-range>
           </ion-content>
         </ion-app>
         `,

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

@@ -55,6 +55,11 @@ <h2>Label, No Items</h2>
                   <span slot="label">Temperature</span>
                 </ion-range>
               </ion-item>
+              <ion-item>
+                <ion-range label-placement="end">
+                  <span slot="label">Temperature</span>
+                </ion-range>
+              </ion-item>
             </ion-list>
           </div>
           <div class="grid-item">
@@ -76,8 +81,9 @@ <h2>No Label, Items</h2>
                 <ion-range aria-label="Temperature">
                   <ion-icon name="volume-off" slot="start"></ion-icon>
                   <ion-icon name="volume-high" slot="end"></ion-icon>
-                </ion-range> </ion-item
-            ></ion-list>
+                </ion-range>
+              </ion-item>
+            </ion-list>
           </div>
           <div class="grid-item">
             <h2>No Label, No Items</h2>

core/src/components/range/test/label/range.e2e.ts

@@ -7,7 +7,7 @@ configs().forEach(({ title, screenshot, config }) => {
       test('should render a range with no visible label', async ({ page }) => {
         await page.setContent(
           `
-          <ion-range legacy="true"></ion-range>
+          <ion-range style="padding: 0px 20px" aria-label="Volume"></ion-range>
         `,
           config
         );
@@ -64,7 +64,7 @@ configs().forEach(({ title, screenshot, config }) => {
       test('should render a range with no visible label', async ({ page }) => {
         await page.setContent(
           `
-          <ion-range legacy="true">
+          <ion-range aria-label="Volume">
             <ion-icon name="volume-off" slot="start"></ion-icon>
             <ion-icon name="volume-high" slot="end"></ion-icon>
           </ion-range>