diff --git a/BREAKING.md b/BREAKING.md
index 3f015668a20..b580a2affa3 100644
--- a/BREAKING.md
+++ b/BREAKING.md
@@ -25,6 +25,7 @@ This is a comprehensive list of the breaking changes introduced in the major ver
- [Picker](#version-8x-picker)
- [Progress bar](#version-8x-progress-bar)
- [Radio](#version-8x-radio)
+ - [Range](#version-8x-range)
- [Select](#version-8x-select)
- [Textarea](#version-8x-textarea)
- [Toggle](#version-8x-toggle)
@@ -183,6 +184,10 @@ For more information on styling toast buttons, refer to the [Toast Theming docum
- The `legacy` property and support for the legacy syntax, which involved placing an `ion-radio` inside of an `ion-item` with an `ion-label`, have been removed. For more information on migrating from the legacy radio syntax, refer to the [Radio documentation](https://ionicframework.com/docs/api/radio#migrating-from-legacy-radio-syntax).
+Range
+
+- The `legacy` property and support for the legacy syntax, which involved placing an `ion-range` inside of an `ion-item` with an `ion-label`, have been removed. For more information on migrating from the legacy range syntax, refer to the [Range documentation](https://ionicframework.com/docs/api/range#migrating-from-legacy-range-syntax).
+
Select
- The `legacy` property and support for the legacy syntax, which involved placing an `ion-select` inside of an `ion-item` with an `ion-label`, have been removed. For more information on migrating from the legacy select syntax, refer to the [Select documentation](https://ionicframework.com/docs/api/select#migrating-from-legacy-select-syntax).
diff --git a/core/api.txt b/core/api.txt
index c79d645c2a1..38fa2787570 100644
--- a/core/api.txt
+++ b/core/api.txt
@@ -1065,7 +1065,6 @@ 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" | "stacked" | "start",'start',false,false
-ion-range,prop,legacy,boolean | undefined,undefined,false,false
ion-range,prop,max,number,100,false,false
ion-range,prop,min,number,0,false,false
ion-range,prop,mode,"ios" | "md",undefined,false,false
diff --git a/core/src/components.d.ts b/core/src/components.d.ts
index 9eaf6d01308..7ee282abc6e 100644
--- a/core/src/components.d.ts
+++ b/core/src/components.d.ts
@@ -2315,10 +2315,6 @@ export namespace Components {
* 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 ("..."). `"stacked"`: The label will appear above the range regardless of the direction.
*/
"labelPlacement": 'start' | 'end' | 'fixed' | 'stacked';
- /**
- * Set the `legacy` property to `true` to forcibly use the legacy form control markup. Ionic will only opt components in to the modern form markup when they are using either the `aria-label` attribute or the `label` property. As a result, the `legacy` property should only be used as an escape hatch when you want to avoid this automatic opt-in behavior. Note that this property will be removed in an upcoming major release of Ionic, and all form components will be opted-in to using the modern form markup.
- */
- "legacy"?: boolean;
/**
* Maximum integer value of the range.
*/
@@ -4179,7 +4175,6 @@ declare global {
interface HTMLIonRangeElementEventMap {
"ionChange": RangeChangeEventDetail;
"ionInput": RangeChangeEventDetail;
- "ionStyle": StyleEventDetail;
"ionFocus": void;
"ionBlur": void;
"ionKnobMoveStart": RangeKnobMoveStartEventDetail;
@@ -7001,10 +6996,6 @@ declare namespace LocalJSX {
* 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 ("..."). `"stacked"`: The label will appear above the range regardless of the direction.
*/
"labelPlacement"?: 'start' | 'end' | 'fixed' | 'stacked';
- /**
- * Set the `legacy` property to `true` to forcibly use the legacy form control markup. Ionic will only opt components in to the modern form markup when they are using either the `aria-label` attribute or the `label` property. As a result, the `legacy` property should only be used as an escape hatch when you want to avoid this automatic opt-in behavior. Note that this property will be removed in an upcoming major release of Ionic, and all form components will be opted-in to using the modern form markup.
- */
- "legacy"?: boolean;
/**
* Maximum integer value of the range.
*/
@@ -7045,10 +7036,6 @@ declare namespace LocalJSX {
* Emitted when the user starts moving the range knob, whether through mouse drag, touch gesture, or keyboard interaction.
*/
"onIonKnobMoveStart"?: (event: IonRangeCustomEvent) => void;
- /**
- * Emitted when the styles change.
- */
- "onIonStyle"?: (event: IonRangeCustomEvent) => void;
/**
* If `true`, a pin with integer value is shown when the knob is pressed.
*/
diff --git a/core/src/components/range/range.ios.scss b/core/src/components/range/range.ios.scss
index 343fb4b42a4..cb78e1ee043 100644
--- a/core/src/components/range/range.ios.scss
+++ b/core/src/components/range/range.ios.scss
@@ -16,11 +16,6 @@
--height: #{$range-ios-slider-height};
}
-// TODO FW-2997 remove this
-:host(.legacy-range) {
- @include padding($range-ios-padding-vertical, $range-ios-padding-horizontal);
-}
-
:host(.range-item-start-adjustment) {
@include padding(null, null, null, $range-ios-item-padding-horizontal);
}
diff --git a/core/src/components/range/range.ios.vars.scss b/core/src/components/range/range.ios.vars.scss
index 30c72b89a81..b51ed489e98 100644
--- a/core/src/components/range/range.ios.vars.scss
+++ b/core/src/components/range/range.ios.vars.scss
@@ -6,10 +6,6 @@
/// @prop - Padding top/bottom of the range
$range-ios-padding-vertical: 8px !default;
-/// @prop - Padding start/end of the range
-// TODO FW-2997 Remove this
-$range-ios-padding-horizontal: 16px !default;
-
/// @prop - Padding start/end of the range - modern syntax
/**
* 24px was chosen so the knob and its
diff --git a/core/src/components/range/range.md.scss b/core/src/components/range/range.md.scss
index 2c2acb0200f..39315680c0c 100644
--- a/core/src/components/range/range.md.scss
+++ b/core/src/components/range/range.md.scss
@@ -18,21 +18,9 @@
--pin-color: #{ion-color(primary, contrast)};
}
-// TODO FW-2997 Remove this
-:host(.legacy-range) ::slotted([slot="label"]) {
- font-size: initial;
-}
-
-:host(:not(.legacy-range)) ::slotted(:not(ion-icon)[slot="start"]),
-:host(:not(.legacy-range)) ::slotted(:not(ion-icon)[slot="end"]),
-:host(:not(.legacy-range)) .native-wrapper {
- font-size: $range-md-pin-font-size;
-}
-
-// TODO FW-2997 remove this
-:host(.legacy-range) {
- @include padding($range-md-padding-vertical, $range-md-padding-horizontal);
-
+::slotted(:not(ion-icon)[slot="start"]),
+::slotted(:not(ion-icon)[slot="end"]),
+.native-wrapper {
font-size: $range-md-pin-font-size;
}
diff --git a/core/src/components/range/range.md.vars.scss b/core/src/components/range/range.md.vars.scss
index b1d72eb3561..c5c0293c8c3 100644
--- a/core/src/components/range/range.md.vars.scss
+++ b/core/src/components/range/range.md.vars.scss
@@ -6,10 +6,6 @@
/// @prop - Padding top/bottom of the range
$range-md-padding-vertical: 8px !default;
-/// @prop - Padding start/end of the range
-// TODO FW-2997 Remove this
-$range-md-padding-horizontal: 14px !default;
-
/// @prop - Padding start/end of the range - modern range
/**
* 18px was chosen so the knob and its focus/active
diff --git a/core/src/components/range/range.tsx b/core/src/components/range/range.tsx
index 1df4ed9c3f5..b1f1c048c0a 100644
--- a/core/src/components/range/range.tsx
+++ b/core/src/components/range/range.tsx
@@ -1,8 +1,6 @@
import type { ComponentInterface, EventEmitter } from '@stencil/core';
import { Component, Element, Event, Host, Prop, State, Watch, h } from '@stencil/core';
import { findClosestIonContent, disableContentScrollY, resetContentScrollY } from '@utils/content';
-import type { LegacyFormController } from '@utils/forms';
-import { createLegacyFormController } from '@utils/forms';
import type { Attributes } from '@utils/helpers';
import { inheritAriaAttributes, clamp, debounceEvent, getAriaLabel, renderHiddenInput } from '@utils/helpers';
import { printIonWarning } from '@utils/logging';
@@ -10,7 +8,7 @@ import { isRTL } from '@utils/rtl';
import { createColorClasses, hostContext } from '@utils/theme';
import { getIonMode } from '../../global/ionic-global';
-import type { Color, Gesture, GestureDetail, StyleEventDetail } from '../../interface';
+import type { Color, Gesture, GestureDetail } from '../../interface';
import { roundToMaxDecimalPlaces } from '../../utils/floating-point';
import type {
@@ -59,10 +57,6 @@ export class Range implements ComponentInterface {
private contentEl: HTMLElement | null = null;
private initialContentScrollY = true;
private originalIonInput?: EventEmitter;
- private legacyFormController!: LegacyFormController;
-
- // This flag ensures we log the deprecation warning at most once.
- private hasLoggedDeprecationWarning = false;
@Element() el!: HTMLIonRangeElement;
@@ -198,7 +192,6 @@ export class Range implements ComponentInterface {
if (this.gesture) {
this.gesture.enable(!this.disabled);
}
- this.emitStyle();
}
/**
@@ -236,17 +229,6 @@ export class Range implements ComponentInterface {
*/
@Prop() labelPlacement: 'start' | 'end' | 'fixed' | 'stacked' = 'start';
- /**
- * Set the `legacy` property to `true` to forcibly use the legacy form control markup.
- * Ionic will only opt components in to the modern form markup when they are
- * using either the `aria-label` attribute or the `label` property. As a result,
- * the `legacy` property should only be used as an escape hatch when you want to
- * avoid this automatic opt-in behavior.
- * Note that this property will be removed in an upcoming major release
- * of Ionic, and all form components will be opted-in to using the modern form markup.
- */
- @Prop() legacy?: boolean;
-
/**
* The `ionChange` event is fired for `` elements when the user
* modifies the element's value:
@@ -264,12 +246,6 @@ export class Range implements ComponentInterface {
*/
@Event() ionInput!: EventEmitter;
- /**
- * Emitted when the styles change.
- * @internal
- */
- @Event() ionStyle!: EventEmitter;
-
/**
* Emitted when the range has focus.
*/
@@ -328,10 +304,6 @@ export class Range implements ComponentInterface {
}
connectedCallback() {
- const { el } = this;
-
- this.legacyFormController = createLegacyFormController(el);
-
this.updateRatio();
this.debounceChanged();
this.disabledChanged();
@@ -395,18 +367,6 @@ export class Range implements ComponentInterface {
}
}
- // TODO FW-2997 remove this
- private emitStyle() {
- if (this.legacyFormController.hasLegacyControl()) {
- this.ionStyle.emit({
- interactive: true,
- 'interactive-disabled': this.disabled,
- // TODO(FW-2997): remove this
- legacy: !!this.legacy,
- });
- }
- }
-
/**
* Emits an `ionChange` event.
*
@@ -553,7 +513,6 @@ export class Range implements ComponentInterface {
if (this.hasFocus) {
this.hasFocus = false;
this.ionBlur.emit();
- this.emitStyle();
}
};
@@ -561,62 +520,9 @@ export class Range implements ComponentInterface {
if (!this.hasFocus) {
this.hasFocus = true;
this.ionFocus.emit();
- this.emitStyle();
}
};
- // TODO FW-2997 remove this
- private renderLegacyRange() {
- if (!this.hasLoggedDeprecationWarning) {
- printIonWarning(
- `ion-range now requires providing a label with either the label slot or the "aria-label" attribute. To migrate, remove any usage of "ion-label" and pass the label text to either the component or the "aria-label" attribute.
-
-Example: Volume
-Example with aria-label:
-
-Developers can use the "legacy" property to continue using the legacy form markup. This property will be removed in an upcoming major release of Ionic where this form control will use the modern form markup.`,
- this.el
- );
-
- if (this.legacy) {
- printIonWarning(
- `ion-range is being used with the "legacy" property enabled which will forcibly enable the legacy form markup. This property will be removed in an upcoming major release of Ionic where this form control will use the modern form markup.
-
-Developers can dismiss this warning by removing their usage of the "legacy" property and using the new range syntax.`,
- this.el
- );
- }
-
- this.hasLoggedDeprecationWarning = true;
- }
-
- const { el, pressedKnob, disabled, pin, rangeId } = this;
-
- const mode = getIonMode(this);
-
- renderHiddenInput(true, el, this.name, JSON.stringify(this.getValue()), disabled);
-
- return (
-
-
- {this.renderRangeSlider()}
-
-
- );
- }
-
/**
* Returns true if content was passed to the "start" slot
*/
@@ -794,7 +700,7 @@ Developers can dismiss this warning by removing their usage of the "legacy" prop
}
let labelledBy: string | undefined;
- if (!this.legacyFormController.hasLegacyControl() && this.hasLabel) {
+ if (this.hasLabel) {
labelledBy = 'range-label';
}
@@ -861,8 +767,7 @@ Developers can dismiss this warning by removing their usage of the "legacy" prop
}
render() {
- const { legacyFormController } = this;
- return legacyFormController.hasLegacyControl() ? this.renderLegacyRange() : this.renderRange();
+ return this.renderRange();
}
}
diff --git a/core/src/components/range/test/a11y/range.e2e.ts b/core/src/components/range/test/a11y/range.e2e.ts
index e501e1d9f12..b7219cf5361 100644
--- a/core/src/components/range/test/a11y/range.e2e.ts
+++ b/core/src/components/range/test/a11y/range.e2e.ts
@@ -33,7 +33,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, co
await page.setContent(
`
-
+
`,
@@ -67,7 +67,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
await page.setContent(
`
-
+
`,
diff --git a/core/src/components/range/test/a11y/range.e2e.ts-snapshots/range-active-md-ltr-Mobile-Chrome-linux.png b/core/src/components/range/test/a11y/range.e2e.ts-snapshots/range-active-md-ltr-Mobile-Chrome-linux.png
index a3448a8f195..ab24d77d0b7 100644
Binary files a/core/src/components/range/test/a11y/range.e2e.ts-snapshots/range-active-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/range/test/a11y/range.e2e.ts-snapshots/range-active-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/range/test/a11y/range.e2e.ts-snapshots/range-active-md-ltr-Mobile-Firefox-linux.png b/core/src/components/range/test/a11y/range.e2e.ts-snapshots/range-active-md-ltr-Mobile-Firefox-linux.png
index b950e32883e..b0528a3acdb 100644
Binary files a/core/src/components/range/test/a11y/range.e2e.ts-snapshots/range-active-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/range/test/a11y/range.e2e.ts-snapshots/range-active-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/range/test/a11y/range.e2e.ts-snapshots/range-active-md-ltr-Mobile-Safari-linux.png b/core/src/components/range/test/a11y/range.e2e.ts-snapshots/range-active-md-ltr-Mobile-Safari-linux.png
index 138c6efa405..18e266a561a 100644
Binary files a/core/src/components/range/test/a11y/range.e2e.ts-snapshots/range-active-md-ltr-Mobile-Safari-linux.png and b/core/src/components/range/test/a11y/range.e2e.ts-snapshots/range-active-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/range/test/a11y/range.e2e.ts-snapshots/range-focus-md-ltr-Mobile-Chrome-linux.png b/core/src/components/range/test/a11y/range.e2e.ts-snapshots/range-focus-md-ltr-Mobile-Chrome-linux.png
index 87c7b7a4164..3c0a4f9e834 100644
Binary files a/core/src/components/range/test/a11y/range.e2e.ts-snapshots/range-focus-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/range/test/a11y/range.e2e.ts-snapshots/range-focus-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/range/test/a11y/range.e2e.ts-snapshots/range-focus-md-ltr-Mobile-Firefox-linux.png b/core/src/components/range/test/a11y/range.e2e.ts-snapshots/range-focus-md-ltr-Mobile-Firefox-linux.png
index c7b29846604..d2ea340b92f 100644
Binary files a/core/src/components/range/test/a11y/range.e2e.ts-snapshots/range-focus-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/range/test/a11y/range.e2e.ts-snapshots/range-focus-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/range/test/a11y/range.e2e.ts-snapshots/range-focus-md-ltr-Mobile-Safari-linux.png b/core/src/components/range/test/a11y/range.e2e.ts-snapshots/range-focus-md-ltr-Mobile-Safari-linux.png
index bb21cf4afe5..db41eca6eb6 100644
Binary files a/core/src/components/range/test/a11y/range.e2e.ts-snapshots/range-focus-md-ltr-Mobile-Safari-linux.png and b/core/src/components/range/test/a11y/range.e2e.ts-snapshots/range-focus-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/range/test/a11y/range.e2e.ts-snapshots/range-focus-with-pin-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/range/test/a11y/range.e2e.ts-snapshots/range-focus-with-pin-ios-ltr-Mobile-Chrome-linux.png
index 0d42fb7ce9f..d3829ecf4a4 100644
Binary files a/core/src/components/range/test/a11y/range.e2e.ts-snapshots/range-focus-with-pin-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/range/test/a11y/range.e2e.ts-snapshots/range-focus-with-pin-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/range/test/a11y/range.e2e.ts-snapshots/range-focus-with-pin-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/range/test/a11y/range.e2e.ts-snapshots/range-focus-with-pin-ios-ltr-Mobile-Firefox-linux.png
index 2c935efa431..7684a019d9c 100644
Binary files a/core/src/components/range/test/a11y/range.e2e.ts-snapshots/range-focus-with-pin-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/range/test/a11y/range.e2e.ts-snapshots/range-focus-with-pin-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/range/test/a11y/range.e2e.ts-snapshots/range-focus-with-pin-ios-ltr-Mobile-Safari-linux.png b/core/src/components/range/test/a11y/range.e2e.ts-snapshots/range-focus-with-pin-ios-ltr-Mobile-Safari-linux.png
index 30b773f6318..f82236504b3 100644
Binary files a/core/src/components/range/test/a11y/range.e2e.ts-snapshots/range-focus-with-pin-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/range/test/a11y/range.e2e.ts-snapshots/range-focus-with-pin-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/range/test/a11y/range.e2e.ts-snapshots/range-focus-with-pin-md-ltr-Mobile-Chrome-linux.png b/core/src/components/range/test/a11y/range.e2e.ts-snapshots/range-focus-with-pin-md-ltr-Mobile-Chrome-linux.png
index 29c655814a5..4ec66ca699d 100644
Binary files a/core/src/components/range/test/a11y/range.e2e.ts-snapshots/range-focus-with-pin-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/range/test/a11y/range.e2e.ts-snapshots/range-focus-with-pin-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/range/test/a11y/range.e2e.ts-snapshots/range-focus-with-pin-md-ltr-Mobile-Firefox-linux.png b/core/src/components/range/test/a11y/range.e2e.ts-snapshots/range-focus-with-pin-md-ltr-Mobile-Firefox-linux.png
index 1e31dbaaac4..1b46119563c 100644
Binary files a/core/src/components/range/test/a11y/range.e2e.ts-snapshots/range-focus-with-pin-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/range/test/a11y/range.e2e.ts-snapshots/range-focus-with-pin-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/range/test/a11y/range.e2e.ts-snapshots/range-focus-with-pin-md-ltr-Mobile-Safari-linux.png b/core/src/components/range/test/a11y/range.e2e.ts-snapshots/range-focus-with-pin-md-ltr-Mobile-Safari-linux.png
index 23cdc610cd5..f767f744900 100644
Binary files a/core/src/components/range/test/a11y/range.e2e.ts-snapshots/range-focus-with-pin-md-ltr-Mobile-Safari-linux.png and b/core/src/components/range/test/a11y/range.e2e.ts-snapshots/range-focus-with-pin-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/range/test/range.spec.ts b/core/src/components/range/test/range.spec.ts
index 0307b45438f..8698f9bbf06 100644
--- a/core/src/components/range/test/range.spec.ts
+++ b/core/src/components/range/test/range.spec.ts
@@ -186,20 +186,6 @@ describe('range: item adjustments', () => {
expect(range.classList.contains('range-item-end-adjustment')).toBe(false);
});
- // TODO FW-2997 remove this
- it('should not add adjustment with legacy syntax', async () => {
- const page = await newSpecPage({
- components: [Item, Range],
- html: `
-
- `,
- });
-
- const range = page.body.querySelector('ion-range')!;
- expect(range.classList.contains('range-item-start-adjustment')).toBe(false);
- expect(range.classList.contains('range-item-end-adjustment')).toBe(false);
- });
-
it('should not add start adjustment when with start adornment', async () => {
const page = await newSpecPage({
components: [Item, Range],
diff --git a/packages/angular/src/directives/proxies.ts b/packages/angular/src/directives/proxies.ts
index 241b1462462..d6d03477334 100644
--- a/packages/angular/src/directives/proxies.ts
+++ b/packages/angular/src/directives/proxies.ts
@@ -1640,14 +1640,14 @@ export declare interface IonRadioGroup extends Components.IonRadioGroup {
@ProxyCmp({
- inputs: ['activeBarStart', 'color', 'debounce', 'disabled', 'dualKnobs', 'label', 'labelPlacement', 'legacy', 'max', 'min', 'mode', 'name', 'pin', 'pinFormatter', 'snaps', 'step', 'ticks', 'value']
+ inputs: ['activeBarStart', 'color', 'debounce', 'disabled', 'dualKnobs', 'label', 'labelPlacement', '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', 'label', 'labelPlacement', 'legacy', 'max', 'min', 'mode', 'name', 'pin', 'pinFormatter', 'snaps', 'step', 'ticks', 'value'],
+ inputs: ['activeBarStart', 'color', 'debounce', 'disabled', 'dualKnobs', 'label', 'labelPlacement', 'max', 'min', 'mode', 'name', 'pin', 'pinFormatter', 'snaps', 'step', 'ticks', 'value'],
})
export class IonRange {
protected el: HTMLElement;
diff --git a/packages/angular/standalone/src/directives/range.ts b/packages/angular/standalone/src/directives/range.ts
index 76561f838e6..e1502ebcf03 100644
--- a/packages/angular/standalone/src/directives/range.ts
+++ b/packages/angular/standalone/src/directives/range.ts
@@ -29,7 +29,6 @@ const RANGE_INPUTS = [
'dualKnobs',
'label',
'labelPlacement',
- 'legacy',
'max',
'min',
'mode',
diff --git a/packages/vue/src/proxies.ts b/packages/vue/src/proxies.ts
index 6ad12689e1f..e66208ce612 100644
--- a/packages/vue/src/proxies.ts
+++ b/packages/vue/src/proxies.ts
@@ -641,10 +641,8 @@ export const IonRange = /*@__PURE__*/ defineContainer