diff --git a/core/src/components/range/range.tsx b/core/src/components/range/range.tsx
index 830e185a5e..2dbb46b12f 100644
--- a/core/src/components/range/range.tsx
+++ b/core/src/components/range/range.tsx
@@ -159,6 +159,12 @@ export class Range implements ComponentInterface {
    * Specifies the value granularity.
    */
   @Prop() step = 1;
+  @Watch('step')
+  protected stepChanged(newValue: number) {
+    if (!isSafeNumber(newValue)) {
+      this.step = 1;
+    }
+  }
 
   /**
    * If `true`, tick marks are displayed based on the step value.
@@ -312,6 +318,7 @@ export class Range implements ComponentInterface {
     // Our watch does this, but not before the initial load.
     this.min = isSafeNumber(this.min) ? this.min : 0;
     this.max = isSafeNumber(this.max) ? this.max : 100;
+    this.step = isSafeNumber(this.step) ? this.step : 1;
   }
 
   componentDidLoad() {
diff --git a/core/src/components/range/test/range.spec.ts b/core/src/components/range/test/range.spec.ts
index 557d09814d..0d83082d39 100644
--- a/core/src/components/range/test/range.spec.ts
+++ b/core/src/components/range/test/range.spec.ts
@@ -40,9 +40,11 @@ describe('Range', () => {
       // Here we have to cast this to any, but in its react wrapper it accepts undefined as a valid value
       range.min = undefined as any;
       range.max = undefined as any;
+      range.step = undefined as any;
       await page.waitForChanges();
       expect(range.min).toBe(0);
       expect(range.max).toBe(100);
+      expect(range.step).toBe(1);
     });
 
     it('should return the clamped value for a range dual knob component', () => {