feat(range): add ticks attribute (#17718)

closes #17717

angular/src/directives/proxies.ts

@@ -586,7 +586,7 @@ export class IonRadioGroup {
 proxyInputs(IonRadioGroup, ['allowEmptySelection', 'name', 'value']);
 
 export declare interface IonRange extends StencilComponents<'IonRange'> {}
-@Component({ selector: 'ion-range', changeDetection: 0, template: '<ng-content></ng-content>', inputs: ['color', 'mode', 'debounce', 'name', 'dualKnobs', 'min', 'max', 'pin', 'snaps', 'step', 'disabled', 'value'] })
+@Component({ selector: 'ion-range', changeDetection: 0, template: '<ng-content></ng-content>', inputs: ['color', 'mode', 'debounce', 'name', 'dualKnobs', 'min', 'max', 'pin', 'snaps', 'step', 'ticks', 'disabled', 'value'] })
 export class IonRange {
   ionChange!: EventEmitter<CustomEvent>;
   ionFocus!: EventEmitter<CustomEvent>;
@@ -598,7 +598,7 @@ export class IonRange {
     proxyOutputs(this, this.el, ['ionChange', 'ionFocus', 'ionBlur']);
   }
 }
-proxyInputs(IonRange, ['color', 'mode', 'debounce', 'name', 'dualKnobs', 'min', 'max', 'pin', 'snaps', 'step', 'disabled', 'value']);
+proxyInputs(IonRange, ['color', 'mode', 'debounce', 'name', 'dualKnobs', 'min', 'max', 'pin', 'snaps', 'step', 'ticks', 'disabled', 'value']);
 
 export declare interface IonRefresher extends StencilComponents<'IonRefresher'> {}
 @Component({ selector: 'ion-refresher', changeDetection: 0, template: '<ng-content></ng-content>', inputs: ['pullMin', 'pullMax', 'closeDuration', 'snapbackDuration', 'disabled'] })

core/api.txt

@@ -805,6 +805,7 @@ ion-range,prop,name,string,'',false,false
 ion-range,prop,pin,boolean,false,false,false
 ion-range,prop,snaps,boolean,false,false,false
 ion-range,prop,step,number,1,false,false
+ion-range,prop,ticks,boolean,true,false,false
 ion-range,prop,value,number | { lower: number; upper: number; },0,false,false
 ion-range,event,ionBlur,void,true
 ion-range,event,ionChange,RangeChangeEventDetail,true

core/src/components.d.ts

@@ -3332,6 +3332,10 @@ export namespace Components {
     */
     'step': number;
     /**
+    * If `true`, tick marks are displayed based on the step value. Only applies when `snaps` is `true`.
+    */
+    'ticks': boolean;
+    /**
     * the value of the range.
     */
     'value': RangeValue;
@@ -3394,6 +3398,10 @@ export namespace Components {
     */
     'step'?: number;
     /**
+    * If `true`, tick marks are displayed based on the step value. Only applies when `snaps` is `true`.
+    */
+    'ticks'?: boolean;
+    /**
     * the value of the range.
     */
     'value'?: RangeValue;

core/src/components/range/range.tsx

@@ -105,6 +105,12 @@ export class Range implements ComponentInterface {
    */
   @Prop() step = 1;
 
+  /**
+   * If `true`, tick marks are displayed based on the step value.
+   * Only applies when `snaps` is `true`.
+   */
+  @Prop() ticks = true;
+
   /**
    * If `true`, the user cannot interact with the range.
    */
@@ -393,7 +399,7 @@ export class Range implements ComponentInterface {
     const end = isRTL ? 'left' : 'right';
 
     const ticks = [];
-    if (this.snaps) {
+    if (this.snaps && this.ticks) {
       for (let value = min; value <= max; value += step) {
         const ratio = valueToRatio(value, min, max);
 

core/src/components/range/readme.md

@@ -43,6 +43,10 @@ left or right of the range.
     <ion-range min="1000" max="2000" step="100" snaps="true" color="secondary"></ion-range>
   </ion-item>
 
+  <ion-item>
+    <ion-range min="1000" max="2000" step="100" snaps="true" ticks="false" color="secondary"></ion-range>
+  </ion-item>
+
   <ion-item>
     <ion-range dualKnobs="true" min="21" max="72" step="3" snaps="true"></ion-range>
   </ion-item>
@@ -76,6 +80,10 @@ left or right of the range.
     <ion-range min="1000" max="2000" step="100" snaps="true" color="secondary"></ion-range>
   </ion-item>
 
+  <ion-item>
+    <ion-range min="1000" max="2000" step="100" snaps="true" ticks="false" color="secondary"></ion-range>
+  </ion-item>
+
   <ion-item>
     <ion-range dual-knobs="true" min="21" max="72" step="3" snaps="true"></ion-range>
   </ion-item>
@@ -115,6 +123,10 @@ const Example: React.SFC<{}> = () => (
       <IonRange min={1000} max={2000} step={100} snaps={true} color="secondary"></IonRange>
     </IonItem>
 
+    <IonItem>
+      <IonRange min={1000} max={2000} step={100} snaps={true} ticks={false} color="secondary"></IonRange>
+    </IonItem>
+
     <IonItem>
       <IonRange dualKnobs={true} min={21} max={72} step={3} snaps={true}></IonRange>
     </IonItem>
@@ -152,6 +164,10 @@ export default Example;
       <ion-range min="1000" max="2000" step="100" snaps="true" color="secondary"></ion-range>
     </ion-item>
 
+    <ion-item>
+      <ion-range min="1000" max="2000" step="100" snaps="true" ticks="false" color="secondary"></ion-range>
+    </ion-item>
+
     <ion-item>
       <ion-range dualKnobs="true" min="21" max="72" step="3" snaps="true"></ion-range>
     </ion-item>
@@ -176,6 +192,7 @@ export default Example;
 | `pin`       | `pin`        | If `true`, a pin with integer value is shown when the knob is pressed.                                                                                                                                                                                                 | `boolean`                                     | `false`     |
 | `snaps`     | `snaps`      | If `true`, the knob snaps to tick marks evenly spaced based on the step property value.                                                                                                                                                                                | `boolean`                                     | `false`     |
 | `step`      | `step`       | Specifies the value granularity.                                                                                                                                                                                                                                       | `number`                                      | `1`         |
+| `ticks`     | `ticks`      | If `true`, tick marks are displayed based on the step value. Only applies when `snaps` is `true`.                                                                                                                                                                      | `boolean`                                     | `true`      |
 | `value`     | `value`      | the value of the range.                                                                                                                                                                                                                                                | `number \| { lower: number; upper: number; }` | `0`         |
 
 

core/src/components/range/test/basic/index.html

@@ -98,6 +98,9 @@
         <ion-item>
           <ion-range min="1000" max="2000" step="100" snaps="true" id="range"></ion-range>
         </ion-item>
+        <ion-item>
+          <ion-range min="1000" max="2000" step="100" snaps="true" ticks="false"></ion-range>
+        </ion-item>
         <ion-item>
           <ion-range dual-knobs="true" id="multiKnob"></ion-range>
         </ion-item>

core/src/components/range/test/preview/index.html

@@ -92,6 +92,9 @@
         <ion-item>
           <ion-range min="1000" max="2000" steps="100" snaps="true" id="range"></ion-range>
         </ion-item>
+        <ion-item>
+          <ion-range min="1000" max="2000" steps="100" snaps="true" ticks="false"></ion-range>
+        </ion-item>
         <ion-item>
           <ion-range dual-knobs="true" id="multiKnob"></ion-range>
         </ion-item>

core/src/components/range/usage/angular.md

@@ -22,10 +22,12 @@
     <ion-range min="1000" max="2000" step="100" snaps="true" color="secondary"></ion-range>
   </ion-item>
 
+  <ion-item>
+    <ion-range min="1000" max="2000" step="100" snaps="true" ticks="false" color="secondary"></ion-range>
+  </ion-item>
+
   <ion-item>
     <ion-range dualKnobs="true" min="21" max="72" step="3" snaps="true"></ion-range>
   </ion-item>
 </ion-list>
 ```
-
-

core/src/components/range/usage/javascript.md

@@ -22,6 +22,10 @@
     <ion-range min="1000" max="2000" step="100" snaps="true" color="secondary"></ion-range>
   </ion-item>
 
+  <ion-item>
+    <ion-range min="1000" max="2000" step="100" snaps="true" ticks="false" color="secondary"></ion-range>
+  </ion-item>
+
   <ion-item>
     <ion-range dual-knobs="true" min="21" max="72" step="3" snaps="true"></ion-range>
   </ion-item>

core/src/components/range/usage/react.md

@@ -28,6 +28,10 @@ const Example: React.SFC<{}> = () => (
       <IonRange min={1000} max={2000} step={100} snaps={true} color="secondary"></IonRange>
     </IonItem>
 
+    <IonItem>
+      <IonRange min={1000} max={2000} step={100} snaps={true} ticks={false} color="secondary"></IonRange>
+    </IonItem>
+
     <IonItem>
       <IonRange dualKnobs={true} min={21} max={72} step={3} snaps={true}></IonRange>
     </IonItem>

core/src/components/range/usage/vue.md

@@ -23,11 +23,13 @@
       <ion-range min="1000" max="2000" step="100" snaps="true" color="secondary"></ion-range>
     </ion-item>
 
+    <ion-item>
+      <ion-range min="1000" max="2000" step="100" snaps="true" ticks="false" color="secondary"></ion-range>
+    </ion-item>
+
     <ion-item>
       <ion-range dualKnobs="true" min="21" max="72" step="3" snaps="true"></ion-range>
     </ion-item>
   </ion-list>
 </template>
 ```
-
-