diff --git a/packages/components/src/numberRange/NumberRange.tsx b/packages/components/src/numberRange/NumberRange.tsx
index 3301de9b0c..33471b0229 100644
--- a/packages/components/src/numberRange/NumberRange.tsx
+++ b/packages/components/src/numberRange/NumberRange.tsx
@@ -58,7 +58,7 @@ const NumberRange: React.FC<Props> = ({
         <TextInput
           type="number"
           label={gteLabel}
-          value={value.gte}
+          value={String(value.gte)}
           disabled={gteDisabled}
           onChange={e =>
             onChange({
@@ -71,7 +71,7 @@ const NumberRange: React.FC<Props> = ({
         <TextInput
           type="number"
           label={lteLabel}
-          value={value.lte}
+          value={String(value.lte)}
           disabled={lteDisabled}
           onChange={e =>
             onChange({
diff --git a/packages/components/src/numberRange/README.mdx b/packages/components/src/numberRange/README.mdx
index 34e37f773b..b5dfa01f9f 100644
--- a/packages/components/src/numberRange/README.mdx
+++ b/packages/components/src/numberRange/README.mdx
@@ -14,18 +14,27 @@ Filter for numerical "more than" and "less than"
 ## Usage
 
 ```jsx react-live
-<NumberRange
-  text="Enter a minimum, maximum or range limit"
-  lteLabel="Max"
-  gteLabel="Min"
-  value={{ gte: 16, lte: 20 }}
-  onChange={value => console.log(value)}
-  lteDisabled={false}
-  lteError={false}
-  gteDisabled={false}
-  gteError={false}
-  maxWidth={246}
-/>
+() => {
+  const [value, setValue] = React.useState({ gte: 16, lte: 20 });
+
+  return (
+    <NumberRange
+      text="Enter a minimum, maximum or range limit"
+      lteLabel="Max"
+      gteLabel="Min"
+      value={value}
+      onChange={newValue => {
+        console.log(newValue);
+        setValue(newValue);
+      }}
+      lteDisabled={false}
+      lteError={false}
+      gteDisabled={false}
+      gteError={false}
+      maxWidth={246}
+    />
+  );
+};
 ```
 
 ## State
diff --git a/packages/components/src/numberRange/__tests__/__snapshots__/numberRange.test.tsx.snap b/packages/components/src/numberRange/__tests__/__snapshots__/numberRange.test.tsx.snap
index 85c61f6f4b..c06a1eee2f 100644
--- a/packages/components/src/numberRange/__tests__/__snapshots__/numberRange.test.tsx.snap
+++ b/packages/components/src/numberRange/__tests__/__snapshots__/numberRange.test.tsx.snap
@@ -142,7 +142,7 @@ exports[`Number Range renders correctly 1`] = `
         onChange={[Function]}
         placeholder=" "
         type="number"
-        value={16}
+        value="16"
       />
     </label>
     <label
@@ -160,7 +160,7 @@ exports[`Number Range renders correctly 1`] = `
         onChange={[Function]}
         placeholder=" "
         type="number"
-        value={20}
+        value="20"
       />
     </label>
   </div>