feat(range): add reference point for start position of range slider

angular/src/directives/proxies.ts

@@ -1304,13 +1304,13 @@ mouse drag, touch gesture, or keyboard interaction.
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['barActiveStart', 'color', 'debounce', 'disabled', 'dualKnobs', 'max', 'min', 'mode', 'name', 'pin', 'pinFormatter', 'snaps', 'step', 'ticks', 'value']
+  inputs: ['activeBarStart', 'color', 'debounce', 'disabled', 'dualKnobs', 'max', 'min', 'mode', 'name', 'pin', 'pinFormatter', 'snaps', 'step', 'ticks', 'value']
 })
 @Component({
   selector: 'ion-range',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['barActiveStart', 'color', 'debounce', 'disabled', 'dualKnobs', 'max', 'min', 'mode', 'name', 'pin', 'pinFormatter', 'snaps', 'step', 'ticks', 'value']
+  inputs: ['activeBarStart', 'color', 'debounce', 'disabled', 'dualKnobs', 'max', 'min', 'mode', 'name', 'pin', 'pinFormatter', 'snaps', 'step', 'ticks', 'value']
 })
 export class IonRange {
   protected el: HTMLElement;
@@ -1979,13 +1979,13 @@ export declare interface IonToggle extends Components.IonToggle {
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['checked', 'color', 'disabled', 'mode', 'name', 'value']
+  inputs: ['checked', 'color', 'disabled', 'enableOnOffLabels', 'mode', 'name', 'value']
 })
 @Component({
   selector: 'ion-toggle',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['checked', 'color', 'disabled', 'mode', 'name', 'value']
+  inputs: ['checked', 'color', 'disabled', 'enableOnOffLabels', 'mode', 'name', 'value']
 })
 export class IonToggle {
   protected el: HTMLElement;

core/api.txt

@@ -971,7 +971,7 @@ ion-radio-group,prop,value,any,undefined,false,false
 ion-radio-group,event,ionChange,RadioGroupChangeEventDetail<any>,true
 
 ion-range,shadow
-ion-range,prop,barActiveStart,number,this.min,false,false
+ion-range,prop,activeBarStart,number | undefined,undefined,false,false
 ion-range,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
 ion-range,prop,debounce,number,0,false,false
 ion-range,prop,disabled,boolean,false,false,false
@@ -1418,6 +1418,7 @@ ion-toggle,shadow
 ion-toggle,prop,checked,boolean,false,false,false
 ion-toggle,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
 ion-toggle,prop,disabled,boolean,false,false,false
+ion-toggle,prop,enableOnOffLabels,boolean | undefined,undefined,false,false
 ion-toggle,prop,mode,"ios" | "md",undefined,false,false
 ion-toggle,prop,name,string,this.inputId,false,false
 ion-toggle,prop,value,null | string | undefined,'on',false,false

core/src/components.d.ts

@@ -2079,7 +2079,7 @@ export namespace Components {
         /**
           * The start position of the range active bar, only available with a single knob (dualKnobs="false"). Valid values are between the `min` and `max` values.
          */
-        "barActiveStart"?: number;
+        "activeBarStart"?: number;
         /**
           * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
          */

core/src/components/range/range.tsx

@@ -147,19 +147,19 @@ export class Range implements ComponentInterface {
    * The start position of the range active bar, only available with a single knob (dualKnobs="false").
    * Valid values are between the `min` and `max` values.
    */
-  @Prop() barActiveStart?: number;
-  @Watch('barActiveStart')
-  protected barActiveStartChanged() {
-    const { barActiveStart } = this;
-    if (barActiveStart !== undefined) {
-      if (barActiveStart > this.max) {
+  @Prop() activeBarStart?: number;
+  @Watch('activeBarStart')
+  protected activeBarStartChanged() {
+    const { activeBarStart } = this;
+    if (activeBarStart !== undefined) {
+      if (activeBarStart > this.max) {
         printIonWarning(
-          `Range: The value of barActiveStart (${barActiveStart}) is greater than the max (${this.max}). Accepted values are between the min and max values of the range.`,
+          `Range: The value of activeBarStart (${activeBarStart}) is greater than the max (${this.max}). Accepted values are between the min and max values of the range.`,
           this.el
         );
-      } else if (barActiveStart < this.min) {
+      } else if (activeBarStart < this.min) {
         printIonWarning(
-          `Range: The value of barActiveStart (${barActiveStart}) is less than the min (${this.min}). Accepted values are between the min and max values of the range.`,
+          `Range: The value of activeBarStart (${activeBarStart}) is less than the min (${this.min}). Accepted values are between the min and max values of the range.`,
           this.el
         );
       }
@@ -276,7 +276,7 @@ export class Range implements ComponentInterface {
     this.updateRatio();
     this.debounceChanged();
     this.disabledChanged();
-    this.barActiveStartChanged();
+    this.activeBarStartChanged();
 
     /**
      * If we have not yet rendered
@@ -420,11 +420,11 @@ export class Range implements ComponentInterface {
     if (this.dualKnobs) {
       return Math.min(this.ratioA, this.ratioB);
     }
-    const { barActiveStart } = this;
-    if (barActiveStart == null) {
+    const { activeBarStart } = this;
+    if (activeBarStart == null) {
       return 0;
     }
-    return valueToRatio(barActiveStart, this.min, this.max);
+    return valueToRatio(activeBarStart, this.min, this.max);
   }
 
   private get ratioUpper() {
@@ -528,7 +528,7 @@ export class Range implements ComponentInterface {
     };
 
     if (this.dualKnobs === false) {
-      if (this.valA < (this.barActiveStart ?? this.min)) {
+      if (this.valA < (this.activeBarStart ?? this.min)) {
         barStart = `${ratioUpper * 100}%`;
         barEnd = `${100 - ratioLower * 100}%`;
       } else {

core/src/components/range/test/barActiveStart/index.html → core/src/components/range/test/activeBarStart/index.html

@@ -2,7 +2,7 @@
 <html lang="en" dir="ltr">
   <head>
     <meta charset="UTF-8" />
-    <title>Range - barActiveStart</title>
+    <title>Range - activeBarStart</title>
     <meta
       name="viewport"
       content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
@@ -22,114 +22,114 @@
     <ion-app>
       <ion-header>
         <ion-toolbar>
-          <ion-title>Range - barActiveStart</ion-title>
+          <ion-title>Range - activeBarStart</ion-title>
         </ion-toolbar>
       </ion-header>
       <ion-content class="ion-padding" id="content">
         <ion-list>
           <ion-item>
-            <ion-label position="stacked">barActiveStart is 0 and value is 0.</ion-label>
+            <ion-label position="stacked">activeBarStart is 0 and value is 0.</ion-label>
             <ion-range
               class="ion-no-padding"
               min="-100"
               max="100"
               snaps="10"
               step="10"
               pin="true"
-              bar-active-start="0"
+              active-bar-start="0"
               value="0"
             >
             </ion-range>
           </ion-item>
           <ion-item>
-            <ion-label position="stacked"> barActiveStart is 0 and value is 70. </ion-label>
+            <ion-label position="stacked"> activeBarStart is 0 and value is 70. </ion-label>
             <ion-range
               class="ion-no-padding"
               min="-100"
               max="100"
               snaps="10"
               step="10"
               pin="true"
-              bar-active-start="0"
+              active-bar-start="0"
               value="70"
             >
             </ion-range>
           </ion-item>
           <ion-item>
-            <ion-label position="stacked"> barActiveStart is 0 and value is -70. </ion-label>
+            <ion-label position="stacked"> activeBarStart is 0 and value is -70. </ion-label>
             <ion-range
               class="ion-no-padding"
               min="-100"
               max="100"
               snaps="10"
               step="10"
               pin="true"
-              bar-active-start="0"
+              active-bar-start="0"
               value="-70"
             >
             </ion-range>
           </ion-item>
           <ion-item>
-            <ion-label position="stacked"> barActiveStart is -30 and value is 0. </ion-label>
+            <ion-label position="stacked"> activeBarStart is -30 and value is 0. </ion-label>
             <ion-range
               class="ion-no-padding"
               min="-100"
               max="100"
               snaps="10"
               step="10"
               pin="true"
-              bar-active-start="-30"
+              active-bar-start="-30"
               value="0"
             >
             </ion-range>
           </ion-item>
           <ion-item>
-            <ion-label position="stacked"> barActiveStart is 30 and value is 0. </ion-label>
+            <ion-label position="stacked"> activeBarStart is 30 and value is 0. </ion-label>
             <ion-range
               class="ion-no-padding"
               min="-100"
               max="100"
               snaps="10"
               step="10"
               pin="true"
-              bar-active-start="30"
+              active-bar-start="30"
               value="0"
             >
             </ion-range>
           </ion-item>
           <ion-item>
-            <ion-label position="stacked">barActiveStart is between steps</ion-label>
+            <ion-label position="stacked">activeBarStart is between steps</ion-label>
             <ion-range
               class="ion-no-padding"
               min="-100"
               max="100"
               snaps="10"
               step="10"
               pin="true"
-              bar-active-start="25"
+              active-bar-start="25"
               value="0"
             ></ion-range>
           </ion-item>
           <ion-item>
-            <ion-label position="stacked">invalid barActiveStart value (less than min)</ion-label>
-            <ion-range class="ion-no-padding" min="0" max="100" snaps="10" step="10" pin="true" bar-active-start="-30">
+            <ion-label position="stacked">invalid activeBarStart value (less than min)</ion-label>
+            <ion-range class="ion-no-padding" min="0" max="100" snaps="10" step="10" pin="true" active-bar-start="-30">
             </ion-range>
           </ion-item>
           <ion-item>
-            <ion-label position="stacked">invalid barActiveStart value (greater than max)</ion-label>
-            <ion-range class="ion-no-padding" min="0" max="100" snaps="10" step="10" pin="true" bar-active-start="110">
+            <ion-label position="stacked">invalid activeBarStart value (greater than max)</ion-label>
+            <ion-range class="ion-no-padding" min="0" max="100" snaps="10" step="10" pin="true" active-bar-start="110">
             </ion-range>
           </ion-item>
           <ion-item>
-            <ion-label position="stacked"> barActiveStart is ignored with dual knobs enabled. </ion-label>
+            <ion-label position="stacked"> activeBarStart is ignored with dual knobs enabled. </ion-label>
             <ion-range
               class="ion-no-padding"
               min="-100"
               max="100"
               snaps="10"
               step="10"
               pin="true"
-              bar-active-start="-30"
+              active-bar-start="-30"
               dual-knobs="true"
               value="30"
             ></ion-range>

core/src/components/range/test/activeBarStart/range.e2e.ts

@@ -0,0 +1,12 @@
+import { expect } from '@playwright/test';
+import { test } from '@utils/test/playwright';
+
+test.describe('range: activeBarStart', () => {
+  test('should not have visual regressions', async ({ page }) => {
+    await page.goto(`/src/components/range/test/activeBarStart`);
+
+    await page.setIonViewport();
+
+    expect(await page.screenshot()).toMatchSnapshot(`range-activeBarStart-diff-${page.getSnapshotSettings()}.png`);
+  });
+});

packages/vue/src/proxies.ts

@@ -587,7 +587,7 @@ export const IonRange = /*@__PURE__*/ defineContainer<JSX.IonRange>('ion-range',
   'snaps',
   'step',
   'ticks',
-  'barActiveStart',
+  'activeBarStart',
   'disabled',
   'value',
   'ionChange',
@@ -818,6 +818,7 @@ export const IonToggle = /*@__PURE__*/ defineContainer<JSX.IonToggle>('ion-toggl
   'checked',
   'disabled',
   'value',
+  'enableOnOffLabels',
   'ionChange',
   'ionFocus',
   'ionBlur',