diff --git a/angular/src/directives/proxies.ts b/angular/src/directives/proxies.ts
index 07af9c83f8..15858340a3 100644
--- a/angular/src/directives/proxies.ts
+++ b/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: '', inputs: ['color', 'mode', 'debounce', 'name', 'dualKnobs', 'min', 'max', 'pin', 'snaps', 'step', 'disabled', 'value'] })
+@Component({ selector: 'ion-range', changeDetection: 0, template: '', inputs: ['color', 'mode', 'debounce', 'name', 'dualKnobs', 'min', 'max', 'pin', 'snaps', 'step', 'ticks', 'disabled', 'value'] })
export class IonRange {
ionChange!: EventEmitter;
ionFocus!: EventEmitter;
@@ -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: '', inputs: ['pullMin', 'pullMax', 'closeDuration', 'snapbackDuration', 'disabled'] })
diff --git a/core/api.txt b/core/api.txt
index 4d17f651de..b974daeb78 100644
--- a/core/api.txt
+++ b/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
diff --git a/core/src/components.d.ts b/core/src/components.d.ts
index a52a07dfc9..397d4463ff 100644
--- a/core/src/components.d.ts
+++ b/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;
diff --git a/core/src/components/range/range.tsx b/core/src/components/range/range.tsx
index 618bbd1084..ce97a1e8a0 100644
--- a/core/src/components/range/range.tsx
+++ b/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);
diff --git a/core/src/components/range/readme.md b/core/src/components/range/readme.md
index 754a727c43..2e846815a8 100644
--- a/core/src/components/range/readme.md
+++ b/core/src/components/range/readme.md
@@ -32,17 +32,21 @@ left or right of the range.
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
@@ -65,17 +69,21 @@ left or right of the range.
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
@@ -104,17 +112,21 @@ const Example: React.SFC<{}> = () => (
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
@@ -141,17 +153,21 @@ export default Example;
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
@@ -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` |
diff --git a/core/src/components/range/test/basic/index.html b/core/src/components/range/test/basic/index.html
index fe31c7410d..552e12d2fc 100644
--- a/core/src/components/range/test/basic/index.html
+++ b/core/src/components/range/test/basic/index.html
@@ -98,6 +98,9 @@
+
+
+
diff --git a/core/src/components/range/test/preview/index.html b/core/src/components/range/test/preview/index.html
index 254690b771..6c26bdfa70 100644
--- a/core/src/components/range/test/preview/index.html
+++ b/core/src/components/range/test/preview/index.html
@@ -92,6 +92,9 @@
+
+
+
diff --git a/core/src/components/range/usage/angular.md b/core/src/components/range/usage/angular.md
index 677afff2a4..aab9deeaa7 100644
--- a/core/src/components/range/usage/angular.md
+++ b/core/src/components/range/usage/angular.md
@@ -11,21 +11,23 @@
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
```
-
-
diff --git a/core/src/components/range/usage/javascript.md b/core/src/components/range/usage/javascript.md
index 4bcbb39678..ca8961cafd 100644
--- a/core/src/components/range/usage/javascript.md
+++ b/core/src/components/range/usage/javascript.md
@@ -11,17 +11,21 @@
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
diff --git a/core/src/components/range/usage/react.md b/core/src/components/range/usage/react.md
index c9580037f4..1815206278 100644
--- a/core/src/components/range/usage/react.md
+++ b/core/src/components/range/usage/react.md
@@ -17,17 +17,21 @@ const Example: React.SFC<{}> = () => (
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
diff --git a/core/src/components/range/usage/vue.md b/core/src/components/range/usage/vue.md
index 6b3f749c25..fc7f63a4c2 100644
--- a/core/src/components/range/usage/vue.md
+++ b/core/src/components/range/usage/vue.md
@@ -12,22 +12,24 @@
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
```
-
-