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>