diff --git a/angular/src/directives/proxies.ts b/angular/src/directives/proxies.ts
index e7e8a469505..c7bc83527c1 100644
--- a/angular/src/directives/proxies.ts
+++ b/angular/src/directives/proxies.ts
@@ -1619,14 +1619,14 @@ export declare interface IonRadioGroup extends Components.IonRadioGroup {
@ProxyCmp({
- inputs: ['activeBarStart', 'color', 'debounce', 'disabled', 'dualKnobs', 'labelPlacement', 'legacy', 'max', 'min', 'mode', 'name', 'pin', 'pinFormatter', 'snaps', 'step', 'ticks', 'value']
+ inputs: ['activeBarStart', 'color', 'debounce', 'disabled', 'dualKnobs', 'label', 'labelPlacement', 'legacy', 'max', 'min', 'mode', 'name', 'pin', 'pinFormatter', 'snaps', 'step', 'ticks', 'value']
})
@Component({
selector: 'ion-range',
changeDetection: ChangeDetectionStrategy.OnPush,
template: '',
// eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
- inputs: ['activeBarStart', 'color', 'debounce', 'disabled', 'dualKnobs', 'labelPlacement', 'legacy', 'max', 'min', 'mode', 'name', 'pin', 'pinFormatter', 'snaps', 'step', 'ticks', 'value'],
+ inputs: ['activeBarStart', 'color', 'debounce', 'disabled', 'dualKnobs', 'label', 'labelPlacement', 'legacy', 'max', 'min', 'mode', 'name', 'pin', 'pinFormatter', 'snaps', 'step', 'ticks', 'value'],
})
export class IonRange {
protected el: HTMLElement;
diff --git a/core/api.txt b/core/api.txt
index f25a05b6427..407da7f2eeb 100644
--- a/core/api.txt
+++ b/core/api.txt
@@ -1030,6 +1030,7 @@ ion-range,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secon
ion-range,prop,debounce,number | undefined,undefined,false,false
ion-range,prop,disabled,boolean,false,false,false
ion-range,prop,dualKnobs,boolean,false,false,false
+ion-range,prop,label,string | undefined,undefined,false,false
ion-range,prop,labelPlacement,"end" | "fixed" | "start",'start',false,false
ion-range,prop,legacy,boolean | undefined,undefined,false,false
ion-range,prop,max,number,100,false,false
diff --git a/core/src/components.d.ts b/core/src/components.d.ts
index b61bac1a575..55fabe7a3e6 100644
--- a/core/src/components.d.ts
+++ b/core/src/components.d.ts
@@ -2289,6 +2289,10 @@ export namespace Components {
* Show two knobs.
*/
"dualKnobs": boolean;
+ /**
+ * 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.
+ */
+ "label"?: string;
/**
* Where to place the label relative to the range. `"start"`: The label will appear to the left of the range in LTR and to the right in RTL. `"end"`: The label will appear to the right of the range in LTR and to the left in RTL. `"fixed"`: The label has the same behavior as `"start"` except it also has a fixed width. Long text will be truncated with ellipses ("...").
*/
@@ -6304,6 +6308,10 @@ declare namespace LocalJSX {
* Show two knobs.
*/
"dualKnobs"?: boolean;
+ /**
+ * 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.
+ */
+ "label"?: string;
/**
* Where to place the label relative to the range. `"start"`: The label will appear to the left of the range in LTR and to the right in RTL. `"end"`: The label will appear to the right of the range in LTR and to the left in RTL. `"fixed"`: The label has the same behavior as `"start"` except it also has a fixed width. Long text will be truncated with ellipses ("...").
*/
diff --git a/core/src/components/range/range.md.scss b/core/src/components/range/range.md.scss
index 35442f2db5c..446117b4ebe 100644
--- a/core/src/components/range/range.md.scss
+++ b/core/src/components/range/range.md.scss
@@ -22,8 +22,7 @@
font-size: $range-md-pin-font-size;
}
-// TODO FW-2997 Remove this
-::slotted([slot="label"]) {
+::slotted([slot="label"]), .label-text {
font-size: initial;
}
diff --git a/core/src/components/range/range.scss b/core/src/components/range/range.scss
index 37cc34802cc..442f005fa2b 100644
--- a/core/src/components/range/range.scss
+++ b/core/src/components/range/range.scss
@@ -209,7 +209,7 @@
opacity: 0.3;
}
-::slotted([slot="label"]) {
+::slotted([slot="label"]), .label-text {
/**
* Label text should not extend
* beyond the bounds of the range.
diff --git a/core/src/components/range/range.tsx b/core/src/components/range/range.tsx
index 971f33dcc79..fbf6353eb68 100644
--- a/core/src/components/range/range.tsx
+++ b/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,
}}
>
-
+ {label !== undefined ? {label}
: }
@@ -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() {
diff --git a/core/src/components/range/test/a11y/index.html b/core/src/components/range/test/a11y/index.html
index f5beb8266a4..2e31b7b1d38 100644
--- a/core/src/components/range/test/a11y/index.html
+++ b/core/src/components/range/test/a11y/index.html
@@ -15,14 +15,18 @@
Range - a11y
- my label
-
+ my label
+
+
+
+
+
temperature
-
+
+
+