bug: Range knob is clipped with modern form syntax in ion-item

[sean-perkins]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

v7.x

Current Behavior

When a modern ion-range is rendered inside of ion-item, the range knob is clipped when at the start or end of the control.

Comparison of standalone vs. inside ion-item:

Note: This behavior only happens when rendered inside ion-item. When ion-range is rendered by itself, it does not clip.

Expected Behavior

The range should adjust styling when used inside of ion-item, so that the range knob is always visible and never clipped.

Steps to Reproduce

1. Render <ion-range aria-label="Volume"></ion-range> inside of ion-item.
2. Observe: The range knob is clipped (for both iOS and MD)

Code Reproduction URL

https://stackblitz.com/edit/angular-9scsxd?file=src%2Fapp%2Fexample.component.html

Ionic Info

N/A

Additional Information

No response

[liamdebeasi]

Looks like these legacy range styles still apply when used in an item:

MD:

ionic-framework/core/src/components/range/range.md.scss

Line 32 in 7ad84cb

@include padding($range-md-padding-vertical, $range-md-padding-horizontal);

iOS:

ionic-framework/core/src/components/range/range.ios.scss

Line 22 in 7ad84cb

@include padding($range-ios-padding-vertical, $range-ios-padding-horizontal);

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.