fix(range): knob is not cut off in item with modern syntax (#28199)

Issue number: resolves #27199

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->

When using the modern range in an item, the knob will get cut off by the
item when the value is at either the min or the max.

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- Range knob is no longer cut off by the item

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->


This is an extension of
https://github.com/ionic-team/ionic-framework/pull/27188. I decided to
make a separate branch/PR since I added tests and changed the
implementation a bit. Feel free to take all/some/none of this code.

---------

Co-authored-by: Sean Perkins <sean-perkins@users.noreply.github.com>
Co-authored-by: ionitron <hi@ionicframework.com>

core/src/components/range/range.tsx

@@ -610,8 +610,41 @@ Developers can dismiss this warning by removing their usage of the "legacy" prop
     );
   }
 
+  /**
+   * Returns true if content was passed to the "start" slot
+   */
+  private get hasStartSlotContent() {
+    return this.el.querySelector('[slot="start"]') !== null;
+  }
+
+  /**
+   * Returns true if content was passed to the "end" slot
+   */
+  private get hasEndSlotContent() {
+    return this.el.querySelector('[slot="end"]') !== null;
+  }
+
   private renderRange() {
-    const { disabled, el, rangeId, pin, pressedKnob, labelPlacement, label } = this;
+    const { disabled, el, hasLabel, rangeId, pin, pressedKnob, labelPlacement, label } = this;
+
+    const inItem = hostContext('ion-item', el);
+
+    /**
+     * If there is no start content then the knob at
+     * the min value will be cut off by the item margin.
+     */
+    const hasStartContent =
+      (hasLabel && (labelPlacement === 'start' || labelPlacement === 'fixed')) || this.hasStartSlotContent;
+
+    const needsStartAdjustment = inItem && !hasStartContent;
+
+    /**
+     * If there is no end content then the knob at
+     * the max value will be cut off by the item margin.
+     */
+    const hasEndContent = (hasLabel && labelPlacement === 'end') || this.hasEndSlotContent;
+
+    const needsEndAdjustment = inItem && !hasEndContent;
 
     const mode = getIonMode(this);
 
@@ -624,18 +657,20 @@ Developers can dismiss this warning by removing their usage of the "legacy" prop
         id={rangeId}
         class={createColorClasses(this.color, {
           [mode]: true,
-          'in-item': hostContext('ion-item', el),
+          'in-item': inItem,
           'range-disabled': disabled,
           'range-pressed': pressedKnob !== undefined,
           'range-has-pin': pin,
           [`range-label-placement-${labelPlacement}`]: true,
+          'range-item-start-adjustment': needsStartAdjustment,
+          'range-item-end-adjustment': needsEndAdjustment,
         })}
       >
         <label class="range-wrapper" id="range-label">
           <div
             class={{
               'label-text-wrapper': true,
-              'label-text-wrapper-hidden': !this.hasLabel,
+              'label-text-wrapper-hidden': !hasLabel,
             }}
           >
             {label !== undefined ? <div class="label-text">{label}</div> : <slot name="label"></slot>}