feat(range): add label prop (#27408)

Issue number: N/A

---------

<!-- 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. -->

Labels on `ion-range` can only be set via the `label` slot. When only
plain text is needed, this is cumbersome because you need to add an
entire new element to wrap the label.

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

Label prop added. If both the prop and slot are used, the prop will take
priority.

## 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. -->

- Docs PR: https://github.com/ionic-team/ionic-docs/pull/2955
- Dev build: `7.0.6-dev.11683657201.139d03f4`

core/src/components/range/range.tsx

@@ -96,6 +96,13 @@ export class Range implements ComponentInterface {
    */
   @Prop() name = this.rangeId;
 
+  /**
+   * The text to display as the control's label. Use this over the `label` slot if
+   * you only need plain text. The `label` property will take priority over the
+   * `label` slot if both are used.
+   */
+  @Prop() label?: string;
+
   /**
    * Show two knobs.
    */
@@ -602,7 +609,7 @@ Developers can dismiss this warning by removing their usage of the "legacy" prop
   }
 
   private renderRange() {
-    const { disabled, el, rangeId, pin, pressedKnob, labelPlacement } = this;
+    const { disabled, el, rangeId, pin, pressedKnob, labelPlacement, label } = this;
 
     const mode = getIonMode(this);
 
@@ -629,7 +636,7 @@ Developers can dismiss this warning by removing their usage of the "legacy" prop
               'label-text-wrapper-hidden': !this.hasLabel,
             }}
           >
-            <slot name="label"></slot>
+            {label !== undefined ? <div class="label-text">{label}</div> : <slot name="label"></slot>}
           </div>
           <div class="native-wrapper">
             <slot name="start"></slot>
@@ -642,7 +649,7 @@ Developers can dismiss this warning by removing their usage of the "legacy" prop
   }
 
   private get hasLabel() {
-    return this.el.querySelector('[slot="label"]') !== null;
+    return this.label !== undefined || this.el.querySelector('[slot="label"]') !== null;
   }
 
   private renderRangeSlider() {