diff --git a/packages/eui/src-docs/src/views/form_controls/form_control_layout_range.tsx b/packages/eui/src-docs/src/views/form_controls/form_control_layout_range.tsx
index ec15ef02c19..8c9e4c85dfa 100644
--- a/packages/eui/src-docs/src/views/form_controls/form_control_layout_range.tsx
+++ b/packages/eui/src-docs/src/views/form_controls/form_control_layout_range.tsx
@@ -18,16 +18,14 @@ export default () => (
     <EuiFormControlLayoutDelimited
       fullWidth
       startControl={
-        <input
-          type="number"
+        <EuiFieldNumber
           placeholder="0"
           className="euiFieldNumber"
           aria-label="Use aria labels when no actual label is in use"
         />
       }
       endControl={
-        <input
-          type="number"
+        <EuiFieldNumber
           placeholder="100"
           className="euiFieldNumber"
           aria-label="Use aria labels when no actual label is in use"
@@ -37,16 +35,14 @@ export default () => (
 
     <EuiFormControlLayoutDelimited
       startControl={
-        <input
-          type="number"
+        <EuiFieldNumber
           placeholder="0"
           className="euiFieldNumber"
           aria-label="Use aria labels when no actual label is in use"
         />
       }
       endControl={
-        <input
-          type="number"
+        <EuiFieldNumber
           placeholder="100"
           className="euiFieldNumber"
           aria-label="Use aria labels when no actual label is in use"
@@ -57,16 +53,14 @@ export default () => (
     <EuiFormControlLayoutDelimited
       append={<EuiFormLabel>px</EuiFormLabel>}
       startControl={
-        <input
-          type="number"
+        <EuiFieldNumber
           placeholder="0"
           className="euiFieldNumber"
           aria-label="Use aria labels when no actual label is in use"
         />
       }
       endControl={
-        <input
-          type="number"
+        <EuiFieldNumber
           placeholder="100"
           className="euiFieldNumber"
           aria-label="Use aria labels when no actual label is in use"
@@ -77,16 +71,14 @@ export default () => (
     <EuiFormControlLayoutDelimited
       icon="vector"
       startControl={
-        <input
-          type="number"
+        <EuiFieldNumber
           placeholder="0"
           className="euiFieldNumber"
           aria-label="Use aria labels when no actual label is in use"
         />
       }
       endControl={
-        <input
-          type="number"
+        <EuiFieldNumber
           placeholder="100"
           className="euiFieldNumber"
           aria-label="Use aria labels when no actual label is in use"
@@ -98,16 +90,14 @@ export default () => (
       clear={{ onClick: () => {} }}
       isLoading
       startControl={
-        <input
-          type="number"
+        <EuiFieldNumber
           placeholder="0"
           className="euiFieldNumber"
           aria-label="Use aria labels when no actual label is in use"
         />
       }
       endControl={
-        <input
-          type="number"
+        <EuiFieldNumber
           placeholder="100"
           className="euiFieldNumber"
           aria-label="Use aria labels when no actual label is in use"
@@ -118,16 +108,14 @@ export default () => (
     <EuiFormControlLayoutDelimited
       isLoading
       startControl={
-        <input
-          type="number"
+        <EuiFieldNumber
           placeholder="0"
           className="euiFieldNumber"
           aria-label="Use aria labels when no actual label is in use"
         />
       }
       endControl={
-        <input
-          type="number"
+        <EuiFieldNumber
           placeholder="100"
           className="euiFieldNumber"
           aria-label="Use aria labels when no actual label is in use"
@@ -138,16 +126,14 @@ export default () => (
     <EuiFormControlLayoutDelimited
       compressed
       startControl={
-        <input
-          type="number"
+        <EuiFieldNumber
           placeholder="0"
           className="euiFieldNumber"
           aria-label="Use aria labels when no actual label is in use"
         />
       }
       endControl={
-        <input
-          type="number"
+        <EuiFieldNumber
           placeholder="100"
           className="euiFieldNumber"
           aria-label="Use aria labels when no actual label is in use"
@@ -158,8 +144,7 @@ export default () => (
     <EuiFormControlLayoutDelimited
       prepend={<EuiFormLabel>Add</EuiFormLabel>}
       startControl={
-        <input
-          type="number"
+        <EuiFieldNumber
           placeholder="0"
           className="euiFieldNumber"
           aria-label="Use aria labels when no actual label is in use"
@@ -167,8 +152,7 @@ export default () => (
       }
       delimiter="+"
       endControl={
-        <input
-          type="number"
+        <EuiFieldNumber
           placeholder="100"
           className="euiFieldNumber"
           aria-label="Use aria labels when no actual label is in use"
@@ -179,8 +163,7 @@ export default () => (
     <EuiFormControlLayoutDelimited
       prepend={<EuiFormLabel>Merge</EuiFormLabel>}
       startControl={
-        <input
-          type="number"
+        <EuiFieldNumber
           placeholder="0"
           className="euiFieldNumber"
           aria-label="Use aria labels when no actual label is in use"
@@ -188,8 +171,7 @@ export default () => (
       }
       delimiter={<EuiIcon type="merge" />}
       endControl={
-        <input
-          type="number"
+        <EuiFieldNumber
           placeholder="100"
           className="euiFieldNumber"
           aria-label="Use aria labels when no actual label is in use"
@@ -201,8 +183,7 @@ export default () => (
       readOnly
       prepend={<EuiFormLabel>Read only</EuiFormLabel>}
       startControl={
-        <input
-          type="number"
+        <EuiFieldNumber
           placeholder="0"
           className="euiFieldNumber"
           readOnly
@@ -210,8 +191,7 @@ export default () => (
         />
       }
       endControl={
-        <input
-          type="number"
+        <EuiFieldNumber
           placeholder="100"
           className="euiFieldNumber"
           readOnly
@@ -224,8 +204,7 @@ export default () => (
       isDisabled
       prepend={<EuiFormLabel>Disabled</EuiFormLabel>}
       startControl={
-        <input
-          type="number"
+        <EuiFieldNumber
           placeholder="0"
           className="euiFieldNumber"
           disabled
@@ -233,8 +212,7 @@ export default () => (
         />
       }
       endControl={
-        <input
-          type="number"
+        <EuiFieldNumber
           placeholder="100"
           className="euiFieldNumber"
           disabled