diff --git a/CHANGELOG.md b/CHANGELOG.md
index e2b7e9bc47b..d7ef2195ad8 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,6 +1,8 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
-No public interface changes since `18.0.0`.
+- Converted `EuiRange` to TypeScript ([#2732](https://github.com/elastic/eui/pull/2732))
+- Converted `EuiDualRange` to TypeScript ([#2732](https://github.com/elastic/eui/pull/2732))
+- Converted `EuiRangeInput` to TypeScript ([#2732](https://github.com/elastic/eui/pull/2732))
 
 ## [`18.0.0`](https://github.com/elastic/eui/tree/v18.0.0)
 
diff --git a/src/components/form/form_control_layout/form_control_layout_delimited.tsx b/src/components/form/form_control_layout/form_control_layout_delimited.tsx
index 57a6a426dc4..0ca6b9f3e9f 100644
--- a/src/components/form/form_control_layout/form_control_layout_delimited.tsx
+++ b/src/components/form/form_control_layout/form_control_layout_delimited.tsx
@@ -7,9 +7,12 @@ import React, {
 import classNames from 'classnames';
 
 import { EuiText } from '../../text';
-import { EuiFormControlLayout } from './form_control_layout';
+import {
+  EuiFormControlLayout,
+  EuiFormControlLayoutProps,
+} from './form_control_layout';
 
-type EuiFormControlLayoutDelimitedProps = Partial<EuiFormControlLayout> & {
+type EuiFormControlLayoutDelimitedProps = Partial<EuiFormControlLayoutProps> & {
   /**
    * Left side control
    */
diff --git a/src/components/form/index.d.ts b/src/components/form/index.d.ts
index c61ad673ada..307bc1349c0 100644
--- a/src/components/form/index.d.ts
+++ b/src/components/form/index.d.ts
@@ -1,7 +1,6 @@
 import { CommonProps } from '../common';
 /// <reference path="./field_search/index.d.ts" />
 /// <reference path="./form_row/index.d.ts" />
-/// <reference path="./range/index.d.ts" />
 /// <reference path="./select/index.d.ts" />
 /// <reference path="./super_select/index.d.ts" />
 
diff --git a/src/components/form/range/__snapshots__/dual_range.test.js.snap b/src/components/form/range/__snapshots__/dual_range.test.tsx.snap
similarity index 94%
rename from src/components/form/range/__snapshots__/dual_range.test.js.snap
rename to src/components/form/range/__snapshots__/dual_range.test.tsx.snap
index 075ee3cb5cf..1bd21581a2e 100644
--- a/src/components/form/range/__snapshots__/dual_range.test.js.snap
+++ b/src/components/form/range/__snapshots__/dual_range.test.tsx.snap
@@ -77,7 +77,7 @@ exports[`EuiDualRange is rendered 1`] = `
     >
       <div
         class="euiRangeHighlight__progress"
-        style="margin-left:0%;width:77.77777777777779%"
+        style="margin-left:1%;width:7.000000000000001%"
       />
     </div>
     <input
@@ -86,8 +86,8 @@ exports[`EuiDualRange is rendered 1`] = `
       class="euiRangeSlider euiRangeSlider--hasRange euiDualRange__slider"
       data-test-subj="test subject string"
       id="id"
-      max="10"
-      min="1"
+      max="100"
+      min="0"
       name="name"
       step="1"
       tabindex="-1"
@@ -115,7 +115,7 @@ exports[`EuiDualRange props compressed should render 1`] = `
     >
       <div
         class="euiRangeHighlight__progress"
-        style="margin-left:0%;width:100%"
+        style="margin-left:1%;width:7.000000000000001%"
       />
     </div>
     <input
@@ -175,7 +175,7 @@ exports[`EuiDualRange props custom ticks should render 1`] = `
     >
       <div
         class="euiRangeHighlight__progress"
-        style="margin-left:0%;width:100%"
+        style="margin-left:20%;width:80%"
       />
     </div>
     <input
@@ -210,7 +210,7 @@ exports[`EuiDualRange props disabled should render 1`] = `
     >
       <div
         class="euiRangeHighlight__progress"
-        style="margin-left:0%;width:100%"
+        style="margin-left:1%;width:7.000000000000001%"
       />
     </div>
     <input
@@ -246,7 +246,7 @@ exports[`EuiDualRange props fullWidth should render 1`] = `
     >
       <div
         class="euiRangeHighlight__progress"
-        style="margin-left:0%;width:100%"
+        style="margin-left:1%;width:7.000000000000001%"
       />
     </div>
     <input
@@ -280,10 +280,10 @@ exports[`EuiDualRange props inputs should render 1`] = `
         aria-label="aria-label"
         class="euiFieldNumber euiRangeInput euiRangeInput--min"
         max="8"
-        min="1"
+        min="0"
         name="name-minValue"
         step="1"
-        style="width:3.6em"
+        style="width:4.4em"
         type="number"
         value="1"
       />
@@ -300,7 +300,7 @@ exports[`EuiDualRange props inputs should render 1`] = `
     >
       <div
         class="euiRangeHighlight__progress"
-        style="margin-left:0%;width:77.77777777777779%"
+        style="margin-left:1%;width:7.000000000000001%"
       />
     </div>
     <input
@@ -309,8 +309,8 @@ exports[`EuiDualRange props inputs should render 1`] = `
       class="euiRangeSlider euiRangeSlider--hasRange euiDualRange__slider"
       data-test-subj="test subject string"
       id="id"
-      max="10"
-      min="1"
+      max="100"
+      min="0"
       name="name"
       step="1"
       tabindex="-1"
@@ -329,11 +329,11 @@ exports[`EuiDualRange props inputs should render 1`] = `
       <input
         aria-label="aria-label"
         class="euiFieldNumber euiRangeInput euiRangeInput--max"
-        max="10"
+        max="100"
         min="1"
         name="name-maxValue"
         step="1"
-        style="width:3.6em"
+        style="width:4.4em"
         type="number"
         value="8"
       />
@@ -362,7 +362,7 @@ exports[`EuiDualRange props labels should render 1`] = `
     >
       <div
         class="euiRangeHighlight__progress"
-        style="margin-left:0%;width:100%"
+        style="margin-left:1%;width:7.000000000000001%"
       />
     </div>
     <input
@@ -414,7 +414,7 @@ exports[`EuiDualRange props levels should render 1`] = `
     >
       <div
         class="euiRangeHighlight__progress"
-        style="margin-left:0%;width:100%"
+        style="margin-left:1%;width:7.000000000000001%"
       />
     </div>
     <input
@@ -487,7 +487,7 @@ exports[`EuiDualRange props slider should display in popover 1`] = `
             aria-label="aria-label"
             class="euiFieldNumber euiFormControlLayoutDelimited__input"
             max="8"
-            min="1"
+            min="0"
             name="name-minValue"
             step="1"
             type="number"
@@ -505,7 +505,7 @@ exports[`EuiDualRange props slider should display in popover 1`] = `
           <input
             aria-label="aria-label"
             class="euiFieldNumber euiFormControlLayoutDelimited__input"
-            max="10"
+            max="100"
             min="1"
             name="name-maxValue"
             step="1"
@@ -594,7 +594,7 @@ exports[`EuiDualRange props ticks should render 1`] = `
     >
       <div
         class="euiRangeHighlight__progress"
-        style="margin-left:0%;width:100%"
+        style="margin-left:1%;width:7.000000000000001%"
       />
     </div>
     <input
diff --git a/src/components/form/range/__snapshots__/range.test.js.snap b/src/components/form/range/__snapshots__/range.test.tsx.snap
similarity index 96%
rename from src/components/form/range/__snapshots__/range.test.js.snap
rename to src/components/form/range/__snapshots__/range.test.tsx.snap
index b231d8aadb5..0b61e969c0c 100644
--- a/src/components/form/range/__snapshots__/range.test.js.snap
+++ b/src/components/form/range/__snapshots__/range.test.tsx.snap
@@ -68,8 +68,8 @@ exports[`EuiRange is rendered 1`] = `
       class="euiRangeSlider"
       data-test-subj="test subject string"
       id="id"
-      max="10"
-      min="1"
+      max="100"
+      min="0"
       name="name"
       step="1"
       type="range"
@@ -96,6 +96,7 @@ exports[`EuiRange props compressed should render 1`] = `
       min="0"
       step="1"
       type="range"
+      value="8"
     />
   </div>
   <div
@@ -143,6 +144,7 @@ exports[`EuiRange props custom ticks should render 1`] = `
       min="0"
       step="1"
       type="range"
+      value="8"
     />
   </div>
   <div
@@ -166,6 +168,7 @@ exports[`EuiRange props disabled should render 1`] = `
       min="0"
       step="1"
       type="range"
+      value="8"
     />
   </div>
   <div
@@ -188,6 +191,7 @@ exports[`EuiRange props fullWidth should render 1`] = `
       min="0"
       step="1"
       type="range"
+      value="8"
     />
   </div>
   <div
@@ -207,8 +211,8 @@ exports[`EuiRange props input should render 1`] = `
       aria-label="aria-label"
       class="euiRangeSlider"
       data-test-subj="test subject string"
-      max="10"
-      min="1"
+      max="100"
+      min="0"
       name="name"
       step="1"
       tabindex="-1"
@@ -230,11 +234,11 @@ exports[`EuiRange props input should render 1`] = `
         class="euiFieldNumber euiRangeInput euiRangeInput--max"
         data-test-subj="test subject string"
         id="id"
-        max="10"
-        min="1"
+        max="100"
+        min="0"
         name="name"
         step="1"
-        style="width:3.6em"
+        style="width:4.4em"
         type="number"
         value="8"
       />
@@ -262,6 +266,7 @@ exports[`EuiRange props labels should render 1`] = `
       min="0"
       step="1"
       type="range"
+      value="8"
     />
   </div>
   <label
@@ -301,6 +306,7 @@ exports[`EuiRange props levels should render 1`] = `
       min="0"
       step="1"
       type="range"
+      value="20"
     />
   </div>
   <div
@@ -359,8 +365,8 @@ exports[`EuiRange props slider should display in popover 1`] = `
             class="euiFieldNumber euiRangeInput euiRangeInput--max"
             data-test-subj="test subject string"
             id="id"
-            max="10"
-            min="1"
+            max="100"
+            min="0"
             name="name"
             step="1"
             type="number"
@@ -447,6 +453,7 @@ exports[`EuiRange props ticks should render 1`] = `
       min="0"
       step="1"
       type="range"
+      value="8"
     />
   </div>
   <div
diff --git a/src/components/form/range/dual_range.test.js b/src/components/form/range/dual_range.test.tsx
similarity index 71%
rename from src/components/form/range/dual_range.test.js
rename to src/components/form/range/dual_range.test.tsx
index fad041a3a4f..069fe9f1237 100644
--- a/src/components/form/range/dual_range.test.js
+++ b/src/components/form/range/dual_range.test.tsx
@@ -6,16 +6,18 @@ import { EuiDualRange } from './dual_range';
 
 jest.mock('../form_row/make_id', () => () => 'generated-id');
 
+const props = {
+  onChange: () => {},
+};
+
 describe('EuiDualRange', () => {
   test('is rendered', () => {
     const component = render(
       <EuiDualRange
         name="name"
         id="id"
-        min={1}
-        max={10}
         value={['1', '8']}
-        onChange={() => {}}
+        {...props}
         {...requiredProps}
       />
     );
@@ -25,31 +27,46 @@ describe('EuiDualRange', () => {
 
   describe('props', () => {
     test('disabled should render', () => {
-      const component = render(<EuiDualRange disabled />);
+      const component = render(
+        <EuiDualRange {...props} value={['1', '8']} disabled />
+      );
 
       expect(component).toMatchSnapshot();
     });
 
     test('fullWidth should render', () => {
-      const component = render(<EuiDualRange fullWidth />);
+      const component = render(
+        <EuiDualRange {...props} value={['1', '8']} fullWidth />
+      );
 
       expect(component).toMatchSnapshot();
     });
 
     test('compressed should render', () => {
-      const component = render(<EuiDualRange compressed />);
+      const component = render(
+        <EuiDualRange {...props} value={['1', '8']} compressed />
+      );
 
       expect(component).toMatchSnapshot();
     });
 
     test('labels should render', () => {
-      const component = render(<EuiDualRange showLabels />);
+      const component = render(
+        <EuiDualRange {...props} value={['1', '8']} showLabels />
+      );
 
       expect(component).toMatchSnapshot();
     });
 
     test('ticks should render', () => {
-      const component = render(<EuiDualRange showTicks tickInterval={20} />);
+      const component = render(
+        <EuiDualRange
+          {...props}
+          value={['1', '8']}
+          showTicks
+          tickInterval={20}
+        />
+      );
 
       expect(component).toMatchSnapshot();
     });
@@ -57,6 +74,8 @@ describe('EuiDualRange', () => {
     test('custom ticks should render', () => {
       const component = render(
         <EuiDualRange
+          {...props}
+          value={[20, 100]}
           showTicks
           ticks={[{ label: '20kb', value: 20 }, { label: '100kb', value: 100 }]}
         />
@@ -66,7 +85,9 @@ describe('EuiDualRange', () => {
     });
 
     test('range should render', () => {
-      const component = render(<EuiDualRange showRange value={[1, 8]} />);
+      const component = render(
+        <EuiDualRange {...props} showRange value={[1, 8]} />
+      );
 
       expect(component).toMatchSnapshot();
     });
@@ -76,11 +97,9 @@ describe('EuiDualRange', () => {
         <EuiDualRange
           name="name"
           id="id"
-          min={1}
-          max={10}
           value={['1', '8']}
-          onChange={() => {}}
           showInput
+          {...props}
           {...requiredProps}
         />
       );
@@ -93,11 +112,9 @@ describe('EuiDualRange', () => {
         <EuiDualRange
           name="name"
           id="id"
-          min={1}
-          max={10}
           value={['1', '8']}
-          onChange={() => {}}
           showInput="inputWithPopover"
+          {...props}
           {...requiredProps}
         />
       );
@@ -120,6 +137,8 @@ describe('EuiDualRange', () => {
               color: 'success',
             },
           ]}
+          value={['1', '8']}
+          onChange={() => {}}
         />
       );
 
@@ -128,17 +147,13 @@ describe('EuiDualRange', () => {
   });
 
   test('allows value prop to accept numbers', () => {
-    const component = render(
-      <EuiDualRange value={[1, 8]} onChange={() => {}} />
-    );
+    const component = render(<EuiDualRange value={[1, 8]} {...props} />);
 
     expect(component).toMatchSnapshot();
   });
 
   test('allows value prop to accept empty strings', () => {
-    const component = render(
-      <EuiDualRange value={['', '']} onChange={() => {}} />
-    );
+    const component = render(<EuiDualRange value={['', '']} {...props} />);
 
     expect(component).toMatchSnapshot();
   });
diff --git a/src/components/form/range/dual_range.js b/src/components/form/range/dual_range.tsx
similarity index 77%
rename from src/components/form/range/dual_range.js
rename to src/components/form/range/dual_range.tsx
index 27d89d8fe75..57d05e93dec 100644
--- a/src/components/form/range/dual_range.js
+++ b/src/components/form/range/dual_range.tsx
@@ -1,33 +1,84 @@
 import React, { Component } from 'react';
-import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
 import { keyCodes } from '../../../services';
 import { isWithinRange } from '../../../services/number';
 import { EuiInputPopover } from '../../popover';
-import { EuiFormControlLayoutDelimited } from '../form_control_layout';
+import {
+  EuiFormControlLayoutDelimited,
+  EuiFormControlLayoutProps,
+} from '../form_control_layout';
 import makeId from '../form_row/make_id';
 
+import { EuiRangeProps } from './range';
 import { EuiRangeHighlight } from './range_highlight';
 import { EuiRangeInput } from './range_input';
 import { EuiRangeLabel } from './range_label';
-import { EuiRangeSlider } from './range_slider';
+import { EuiRangeLevel } from './range_levels';
+import { EuiRangeSlider, EuiRangeSliderProps } from './range_slider';
 import { EuiRangeThumb } from './range_thumb';
-import { EuiRangeTrack, LEVEL_COLORS } from './range_track';
+import { EuiRangeTick } from './range_ticks';
+import { EuiRangeTrack } from './range_track';
 import { EuiRangeWrapper } from './range_wrapper';
 
-export class EuiDualRange extends Component {
+type ValueMember = number | string;
+
+export interface EuiDualRangeProps
+  extends Omit<
+    EuiRangeSliderProps,
+    'onChange' | 'onBlur' | 'onFocus' | 'value'
+  > {
+  value: [ValueMember, ValueMember];
+  onBlur?: (
+    event: React.FocusEvent<HTMLInputElement> | React.FocusEvent<HTMLDivElement>
+  ) => void;
+  onFocus?: (
+    event: React.FocusEvent<HTMLInputElement> | React.FocusEvent<HTMLDivElement>
+  ) => void;
+  onChange: (
+    values: [ValueMember, ValueMember],
+    isValid: boolean,
+    event:
+      | React.ChangeEvent<HTMLInputElement>
+      | React.MouseEvent<HTMLButtonElement>
+      | React.KeyboardEvent<HTMLInputElement>
+  ) => void;
+  fullWidth?: boolean;
+  isInvalid?: boolean;
+  levels?: EuiRangeLevel[];
+  showLabels?: boolean;
+  showInput?: EuiRangeProps['showInput'];
+  tickInterval?: number;
+  ticks?: EuiRangeTick[];
+  append?: EuiFormControlLayoutProps['append'];
+  prepend?: EuiFormControlLayoutProps['prepend'];
+}
+
+export class EuiDualRange extends Component<EuiDualRangeProps> {
+  static defaultProps = {
+    min: 0,
+    max: 100,
+    step: 1,
+    fullWidth: false,
+    compressed: false,
+    showLabels: false,
+    showInput: false,
+    showRange: true,
+    showTicks: false,
+    levels: [],
+  };
+
   state = {
     id: this.props.id || makeId(),
     hasFocus: false,
     rangeSliderRefAvailable: false,
     isPopoverOpen: false,
-    rangeWidth: null,
+    rangeWidth: undefined,
   };
 
   preventPopoverClose = false;
-  rangeSliderRef = null;
-  handleRangeSliderRefUpdate = ref => {
+  rangeSliderRef: HTMLInputElement | null = null;
+  handleRangeSliderRefUpdate = (ref: HTMLInputElement | null) => {
     this.rangeSliderRef = ref;
     this.setState({
       rangeSliderRefAvailable: !!ref,
@@ -51,7 +102,15 @@ export class EuiDualRange extends Component {
     return this.lowerValueIsValid && this.upperValueIsValid;
   }
 
-  _determineInvalidThumbMovement = (newVal, lower, upper, e) => {
+  _determineInvalidThumbMovement = (
+    newVal: ValueMember,
+    lower: ValueMember,
+    upper: ValueMember,
+    e:
+      | React.ChangeEvent<HTMLInputElement>
+      | React.MouseEvent<HTMLButtonElement>
+      | React.KeyboardEvent<HTMLInputElement>
+  ) => {
     // If the values are invalid, find whether the new value is in the upper
     // or lower half and move the appropriate handle to the new value,
     // while the other handle gets moved to the opposite bound (if invalid)
@@ -68,9 +127,17 @@ export class EuiDualRange extends Component {
     this._handleOnChange(lower, upper, e);
   };
 
-  _determineValidThumbMovement = (newVal, lower, upper, e) => {
+  _determineValidThumbMovement = (
+    newVal: ValueMember,
+    lower: ValueMember,
+    upper: ValueMember,
+    e: React.ChangeEvent<HTMLInputElement> | React.MouseEvent<HTMLButtonElement>
+  ) => {
     // Lower thumb targeted or right-moving swap has occured
-    if (Math.abs(lower - newVal) < Math.abs(upper - newVal)) {
+    if (
+      Math.abs((lower as number) - (newVal as number)) <
+      Math.abs((upper as number) - (newVal as number))
+    ) {
       lower = newVal;
     }
     // Upper thumb targeted or left-moving swap has occured
@@ -80,7 +147,10 @@ export class EuiDualRange extends Component {
     this._handleOnChange(lower, upper, e);
   };
 
-  _determineThumbMovement = (newVal, e) => {
+  _determineThumbMovement = (
+    newVal: number,
+    e: React.ChangeEvent<HTMLInputElement> | React.MouseEvent<HTMLButtonElement>
+  ) => {
     // Determine thumb movement based on slider interaction
     if (!this.isValid) {
       // Non-standard positioning follows
@@ -101,18 +171,27 @@ export class EuiDualRange extends Component {
     }
   };
 
-  _handleOnChange = (lower, upper, e) => {
+  _handleOnChange = (
+    lower: ValueMember,
+    upper: ValueMember,
+    e:
+      | React.ChangeEvent<HTMLInputElement>
+      | React.MouseEvent<HTMLButtonElement>
+      | React.KeyboardEvent<HTMLInputElement>
+  ) => {
     const isValid =
       isWithinRange(this.props.min, upper, lower) &&
       isWithinRange(lower, this.props.max, upper);
     this.props.onChange([lower, upper], isValid, e);
   };
 
-  handleSliderChange = e => {
-    this._determineThumbMovement(e.target.value, e);
+  handleSliderChange = (
+    e: React.ChangeEvent<HTMLInputElement> | React.MouseEvent<HTMLButtonElement>
+  ) => {
+    this._determineThumbMovement(Number(e.currentTarget.value), e);
   };
 
-  _resetToRangeEnds = e => {
+  _resetToRangeEnds = (e: React.KeyboardEvent<HTMLInputElement>) => {
     // Arbitrary decision to pass `min` instead of `max`. Result is the same.
     this._determineInvalidThumbMovement(
       this.props.min,
@@ -122,7 +201,7 @@ export class EuiDualRange extends Component {
     );
   };
 
-  _isDirectionalKeyPress = e => {
+  _isDirectionalKeyPress = (e: React.KeyboardEvent<HTMLInputElement>) => {
     return (
       [keyCodes.UP, keyCodes.RIGHT, keyCodes.DOWN, keyCodes.LEFT].indexOf(
         e.keyCode
@@ -130,7 +209,7 @@ export class EuiDualRange extends Component {
     );
   };
 
-  handleInputKeyDown = e => {
+  handleInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
     // Relevant only when initial values are both `''` and `showInput` is set
     if (this._isDirectionalKeyPress(e) && !this.isValid) {
       e.preventDefault();
@@ -138,15 +217,18 @@ export class EuiDualRange extends Component {
     }
   };
 
-  handleLowerInputChange = e => {
+  handleLowerInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     this._handleOnChange(e.target.value, this.upperValue, e);
   };
 
-  handleUpperInputChange = e => {
+  handleUpperInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     this._handleOnChange(this.lowerValue, e.target.value, e);
   };
 
-  _handleKeyDown = (value, e) => {
+  _handleKeyDown = (
+    value: ValueMember,
+    e: React.KeyboardEvent<HTMLInputElement>
+  ) => {
     let newVal = Number(value);
     let stepRemainder = 0;
     const step = this.props.step || 1;
@@ -173,7 +255,7 @@ export class EuiDualRange extends Component {
     return newVal;
   };
 
-  handleLowerKeyDown = e => {
+  handleLowerKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
     let lower = this.lowerValue;
     switch (e.keyCode) {
       case keyCodes.TAB:
@@ -191,7 +273,7 @@ export class EuiDualRange extends Component {
     this._handleOnChange(lower, this.upperValue, e);
   };
 
-  handleUpperKeyDown = e => {
+  handleUpperKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
     let upper = this.upperValue;
     switch (e.keyCode) {
       case keyCodes.TAB:
@@ -209,7 +291,7 @@ export class EuiDualRange extends Component {
     this._handleOnChange(this.lowerValue, upper, e);
   };
 
-  calculateThumbPositionStyle = (value, width) => {
+  calculateThumbPositionStyle = (value: number, width?: number) => {
     // Calculate the left position based on value
     const decimal =
       (value - this.props.min) / (this.props.max - this.props.min);
@@ -219,9 +301,9 @@ export class EuiDualRange extends Component {
 
     const EUI_THUMB_SIZE = 16;
     const trackWidth =
-      this.props.showInput === 'only' && !!width
+      this.props.showInput === 'inputWithPopover' && !!width
         ? width
-        : this.rangeSliderRef.clientWidth;
+        : this.rangeSliderRef!.clientWidth;
     const thumbToTrackRatio = EUI_THUMB_SIZE / trackWidth;
     const trackPositionScale = (1 - thumbToTrackRatio) * 100;
     return { left: `${valuePosition * trackPositionScale}%` };
@@ -233,21 +315,21 @@ export class EuiDualRange extends Component {
     });
   };
 
-  onThumbFocus = e => {
+  onThumbFocus = (e: React.FocusEvent<HTMLDivElement>) => {
     if (this.props.onFocus) {
       this.props.onFocus(e);
     }
     this.toggleHasFocus(true);
   };
 
-  onThumbBlur = e => {
+  onThumbBlur = (e: React.FocusEvent<HTMLDivElement>) => {
     if (this.props.onBlur) {
       this.props.onBlur(e);
     }
     this.toggleHasFocus(false);
   };
 
-  onInputFocus = e => {
+  onInputFocus = (e: React.FocusEvent<HTMLInputElement>) => {
     if (this.props.onFocus) {
       this.props.onFocus(e);
     }
@@ -257,7 +339,7 @@ export class EuiDualRange extends Component {
     });
   };
 
-  onInputBlur = e =>
+  onInputBlur = (e: React.FocusEvent<HTMLInputElement>) =>
     setTimeout(() => {
       // Safari does not recognize any focus-related eventing for input[type=range]
       // making it impossible to capture its state using active/focus/relatedTarget
@@ -280,7 +362,7 @@ export class EuiDualRange extends Component {
     });
   };
 
-  onResize = width => {
+  onResize = (width?: number) => {
     this.setState({
       rangeWidth: width,
     });
@@ -345,7 +427,7 @@ export class EuiDualRange extends Component {
         isInvalid={isInvalid}
         controlOnly={showInputOnly}
         onMouseDown={
-          showInputOnly ? () => (this.preventPopoverClose = true) : null
+          showInputOnly ? () => (this.preventPopoverClose = true) : undefined
         }
       />
     ) : (
@@ -375,7 +457,7 @@ export class EuiDualRange extends Component {
         controlOnly={showInputOnly}
         isInvalid={isInvalid}
         onMouseDown={
-          showInputOnly ? () => (this.preventPopoverClose = true) : null
+          showInputOnly ? () => (this.preventPopoverClose = true) : undefined
         }
       />
     ) : (
@@ -458,7 +540,7 @@ export class EuiDualRange extends Component {
                 onFocus={this.onThumbFocus}
                 onBlur={this.onThumbBlur}
                 style={this.calculateThumbPositionStyle(
-                  this.lowerValue || min,
+                  Number(this.lowerValue) || min,
                   this.state.rangeWidth
                 )}
                 aria-describedby={this.props['aria-describedby']}
@@ -475,7 +557,7 @@ export class EuiDualRange extends Component {
                 onFocus={this.onThumbFocus}
                 onBlur={this.onThumbBlur}
                 style={this.calculateThumbPositionStyle(
-                  this.upperValue || max,
+                  Number(this.upperValue) || max,
                   this.state.rangeWidth
                 )}
                 aria-describedby={this.props['aria-describedby']}
@@ -499,8 +581,8 @@ export class EuiDualRange extends Component {
         className="euiRange__popover"
         input={
           <EuiFormControlLayoutDelimited
-            startControl={minInput}
-            endControl={maxInput}
+            startControl={minInput!}
+            endControl={maxInput!}
             isDisabled={disabled}
             fullWidth={fullWidth}
             compressed={compressed}
@@ -523,78 +605,3 @@ export class EuiDualRange extends Component {
     return thePopover || theRange;
   }
 }
-
-EuiDualRange.propTypes = {
-  name: PropTypes.string,
-  id: PropTypes.string,
-  min: PropTypes.number.isRequired,
-  max: PropTypes.number.isRequired,
-  step: PropTypes.number,
-  /**
-   * Array containing lower and upper values. Fallback is `min` and `max` respectively
-   */
-  value: PropTypes.arrayOf(
-    PropTypes.oneOfType([PropTypes.number, PropTypes.string])
-  ),
-  fullWidth: PropTypes.bool,
-  compressed: PropTypes.bool,
-  disabled: PropTypes.bool,
-  readOnly: PropTypes.bool,
-  /**
-   * Shows static min/max labels on the sides of the range slider
-   */
-  showLabels: PropTypes.bool,
-  /**
-   * Pass `true` to displays an extra input control for direct manipulation.
-   * Pass `'inputWithPopover'` to only show the input but show the range in a dropdown.
-   */
-  showInput: PropTypes.oneOf([true, false, 'inputWithPopover']),
-  /**
-   * Shows clickable tick marks and labels at the given interval (`step`/`tickInterval`)
-   */
-  showTicks: PropTypes.bool,
-  /**
-   * Modifies the number of tick marks and at what interval
-   */
-  tickInterval: PropTypes.number,
-  /**
-   * Specified ticks at specified values
-   */
-  ticks: PropTypes.arrayOf(
-    PropTypes.shape({
-      value: PropTypes.number.isRequired,
-      label: PropTypes.node.isRequired,
-    })
-  ),
-  /**
-   * Function signature: `([lowerValue, upperValue], isValid, event)`
-   */
-  onChange: PropTypes.func,
-  /**
-   * Create colored indicators for certain intervals
-   */
-  levels: PropTypes.arrayOf(
-    PropTypes.shape({
-      min: PropTypes.number,
-      max: PropTypes.number,
-      color: PropTypes.oneOf(LEVEL_COLORS),
-    })
-  ),
-  /**
-   * Shows a thick line from lower value to upper value
-   */
-  showRange: PropTypes.bool,
-};
-
-EuiDualRange.defaultProps = {
-  min: 0,
-  max: 100,
-  step: 1,
-  fullWidth: false,
-  compressed: false,
-  showLabels: false,
-  showInput: false,
-  showRange: true,
-  showTicks: false,
-  levels: [],
-};
diff --git a/src/components/form/range/index.d.ts b/src/components/form/range/index.d.ts
deleted file mode 100644
index ede0fe33566..00000000000
--- a/src/components/form/range/index.d.ts
+++ /dev/null
@@ -1,87 +0,0 @@
-import { CommonProps } from '../../common';
-
-import { ReactNode, FunctionComponent, InputHTMLAttributes } from 'react';
-
-import { EuiRangeHighlightProps } from './range_highlight';
-import { EuiRangeLabelProps } from './range_label';
-import { EuiRangeLevelsProps, EuiRangeLevel } from './range_levels';
-import { EuiRangeSliderProps } from './range_slider';
-import { EuiRangeThumbProps } from './range_thumb';
-import { EuiRangeTicksProps } from './range_ticks';
-import { EuiRangeTooltipProps } from './range_tooltip';
-import { EuiRangeTrackProps } from './range_track';
-import { EuiRangeWrapperProps } from './range_wrapper';
-
-declare module '@elastic/eui' {
-  export type EuiRangeLevelColor = 'primary' | 'success' | 'warning' | 'danger';
-
-  export const EuiRangeHighlight: FunctionComponent<EuiRangeHighlightProps>;
-  export const EuiRangeLabel: FunctionComponent<EuiRangeLabelProps>;
-  export const EuiRangeLevels: FunctionComponent<EuiRangeLevelsProps>;
-  export const EuiRangeSlider: FunctionComponent<EuiRangeSliderProps>;
-  export const EuiRangeThumb: FunctionComponent<EuiRangeThumbProps>;
-  export const EuiRangeTicks: FunctionComponent<EuiRangeTicksProps>;
-  export const EuiRangeTooltip: FunctionComponent<EuiRangeTooltipProps>;
-  export const EuiRangeTrack: FunctionComponent<EuiRangeTrackProps>;
-  export const EuiRangeWrapper: FunctionComponent<EuiRangeWrapperProps>;
-
-  /**
-   * single range type def
-   *
-   * @see './range.js'
-   */
-
-  export interface EuiRangeProps {
-    compressed?: boolean;
-    readOnly?: boolean;
-    fullWidth?: boolean;
-    id?: string;
-    levels?: EuiRangeLevel[];
-    // `min` and `max` are optional in HTML but required for our component,
-    // so we override them.
-    max: number;
-    min: number;
-    // The spec allows string values for `step` but the component requires
-    // a number.
-    step?: number;
-    showInput?: boolean | 'inputWithPopover';
-    showLabels?: boolean;
-    showRange?: boolean;
-    showTicks?: boolean;
-    showValue?: boolean;
-    tickInterval?: number;
-    valueAppend?: ReactNode;
-    valuePrepend?: ReactNode;
-
-    onChange?: (
-      event:
-        | React.ChangeEvent<HTMLInputElement>
-        | React.MouseEvent<HTMLButtonElement>,
-      isValid: boolean
-    ) => void;
-  }
-
-  export const EuiRange: FunctionComponent<
-    CommonProps &
-      Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange'> &
-      EuiRangeProps
-  >;
-
-  /**
-   * dual range type defs
-   *
-   * @see './dual_range.js'
-   */
-
-  export interface EuiDualRangeProps {
-    // Override acceptable value type
-    value: [number | string, number | string];
-  }
-
-  export const EuiDualRange: FunctionComponent<
-    CommonProps &
-      Omit<InputHTMLAttributes<HTMLInputElement>, 'value'> &
-      EuiRangeProps &
-      EuiDualRangeProps
-  >;
-}
diff --git a/src/components/form/range/index.js b/src/components/form/range/index.js
deleted file mode 100644
index b536c93abd0..00000000000
--- a/src/components/form/range/index.js
+++ /dev/null
@@ -1,2 +0,0 @@
-export { EuiDualRange } from './dual_range';
-export { EuiRange } from './range';
diff --git a/src/components/form/range/index.ts b/src/components/form/range/index.ts
new file mode 100644
index 00000000000..8413e8019d5
--- /dev/null
+++ b/src/components/form/range/index.ts
@@ -0,0 +1,17 @@
+export { EuiRangeHighlight, EuiRangeHighlightProps } from './range_highlight';
+export { EuiRangeLabel, EuiRangeLabelProps } from './range_label';
+export {
+  EuiRangeLevels,
+  EuiRangeLevelsProps,
+  EuiRangeLevel,
+  EuiRangeLevelColor,
+} from './range_levels';
+export { EuiRangeSlider, EuiRangeSliderProps } from './range_slider';
+export { EuiRangeThumb, EuiRangeThumbProps } from './range_thumb';
+export { EuiRangeTicks, EuiRangeTicksProps } from './range_ticks';
+export { EuiRangeTooltip, EuiRangeTooltipProps } from './range_tooltip';
+export { EuiRangeTrack, EuiRangeTrackProps } from './range_track';
+export { EuiRangeWrapper, EuiRangeWrapperProps } from './range_wrapper';
+
+export { EuiDualRange, EuiDualRangeProps } from './dual_range';
+export { EuiRange, EuiRangeProps } from './range';
diff --git a/src/components/form/range/range.test.js b/src/components/form/range/range.test.tsx
similarity index 76%
rename from src/components/form/range/range.test.js
rename to src/components/form/range/range.test.tsx
index e8f7c01e915..2cba13f8349 100644
--- a/src/components/form/range/range.test.js
+++ b/src/components/form/range/range.test.tsx
@@ -6,16 +6,18 @@ import { EuiRange } from './range';
 
 jest.mock('../form_row/make_id', () => () => 'generated-id');
 
+const props = {
+  value: '8',
+};
+
 describe('EuiRange', () => {
   test('is rendered', () => {
     const component = render(
       <EuiRange
         name="name"
         id="id"
-        min={1}
-        max={10}
-        value="8"
         onChange={() => {}}
+        {...props}
         {...requiredProps}
       />
     );
@@ -25,31 +27,33 @@ describe('EuiRange', () => {
 
   describe('props', () => {
     test('disabled should render', () => {
-      const component = render(<EuiRange disabled />);
+      const component = render(<EuiRange {...props} disabled />);
 
       expect(component).toMatchSnapshot();
     });
 
     test('fullWidth should render', () => {
-      const component = render(<EuiRange fullWidth />);
+      const component = render(<EuiRange {...props} fullWidth />);
 
       expect(component).toMatchSnapshot();
     });
 
     test('compressed should render', () => {
-      const component = render(<EuiRange compressed />);
+      const component = render(<EuiRange {...props} compressed />);
 
       expect(component).toMatchSnapshot();
     });
 
     test('labels should render', () => {
-      const component = render(<EuiRange showLabels />);
+      const component = render(<EuiRange {...props} showLabels />);
 
       expect(component).toMatchSnapshot();
     });
 
     test('ticks should render', () => {
-      const component = render(<EuiRange showTicks tickInterval={20} />);
+      const component = render(
+        <EuiRange {...props} showTicks tickInterval={20} />
+      );
 
       expect(component).toMatchSnapshot();
     });
@@ -57,6 +61,7 @@ describe('EuiRange', () => {
     test('custom ticks should render', () => {
       const component = render(
         <EuiRange
+          {...props}
           showTicks
           ticks={[{ label: '20kb', value: 20 }, { label: '100kb', value: 100 }]}
         />
@@ -66,18 +71,20 @@ describe('EuiRange', () => {
     });
 
     test('range should render', () => {
-      const component = render(<EuiRange showRange value="8" />);
+      const component = render(<EuiRange {...props} showRange />);
 
       expect(component).toMatchSnapshot();
     });
 
     test('value should render', () => {
+      const { value, ...localProps } = props;
       const component = render(
         <EuiRange
           value="200"
           showValue
           valuePrepend="before"
           valueAppend="after"
+          {...localProps}
         />
       );
 
@@ -89,11 +96,9 @@ describe('EuiRange', () => {
         <EuiRange
           name="name"
           id="id"
-          min={1}
-          max={10}
-          value="8"
           onChange={() => {}}
           showInput
+          {...props}
           {...requiredProps}
         />
       );
@@ -106,11 +111,9 @@ describe('EuiRange', () => {
         <EuiRange
           name="name"
           id="id"
-          min={1}
-          max={10}
-          value="8"
           onChange={() => {}}
           showInput="inputWithPopover"
+          {...props}
           {...requiredProps}
         />
       );
@@ -133,6 +136,7 @@ describe('EuiRange', () => {
               color: 'success',
             },
           ]}
+          value={20}
         />
       );
 
@@ -141,15 +145,19 @@ describe('EuiRange', () => {
   });
 
   test('allows value prop to accept a number', () => {
+    const { value, ...localProps } = props;
     const component = render(
-      <EuiRange value={8} onChange={() => {}} showValue />
+      <EuiRange value={8} onChange={() => {}} showValue {...localProps} />
     );
 
     expect(component).toMatchSnapshot();
   });
 
   test('allows value prop to accept empty string', () => {
-    const component = render(<EuiRange value={''} onChange={() => {}} />);
+    const { value, ...localProps } = props;
+    const component = render(
+      <EuiRange value={''} onChange={() => {}} {...localProps} />
+    );
 
     expect(component).toMatchSnapshot();
   });
diff --git a/src/components/form/range/range.js b/src/components/form/range/range.tsx
similarity index 73%
rename from src/components/form/range/range.js
rename to src/components/form/range/range.tsx
index 8dbfcfe41d1..331ebd681ed 100644
--- a/src/components/form/range/range.js
+++ b/src/components/form/range/range.tsx
@@ -1,44 +1,124 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
+import React, { Component, ReactNode } from 'react';
 import classNames from 'classnames';
 
+import { CommonProps } from '../../common';
 import { isWithinRange } from '../../../services/number';
 import { EuiInputPopover } from '../../popover';
 import makeId from '../form_row/make_id';
 
 import { EuiRangeHighlight } from './range_highlight';
-import { EuiRangeInput } from './range_input';
+import { EuiRangeInput, EuiRangeInputProps } from './range_input';
 import { EuiRangeLabel } from './range_label';
+import { EuiRangeLevel } from './range_levels';
 import { EuiRangeSlider } from './range_slider';
+import { EuiRangeTick } from './range_ticks';
 import { EuiRangeTooltip } from './range_tooltip';
-import { EuiRangeTrack, LEVEL_COLORS } from './range_track';
+import { EuiRangeTrack } from './range_track';
 import { EuiRangeWrapper } from './range_wrapper';
 
-export class EuiRange extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      id: props.id || makeId(),
-      isPopoverOpen: false,
-    };
+export interface EuiRangeProps
+  extends CommonProps,
+    Omit<EuiRangeInputProps, 'onChange' | 'digitTolerance'> {
+  compressed?: boolean;
+  readOnly?: boolean;
+  fullWidth?: boolean;
+  id?: string;
+  /**
+   * Create colored indicators for certain intervals
+   */
+  levels?: EuiRangeLevel[];
+  step?: number;
+  /**
+   * Pass `true` to displays an extra input control for direct manipulation.
+   * Pass `'inputWithPopover'` to only show the input but show the range in a dropdown.
+   */
+  showInput?: boolean | 'inputWithPopover';
+  /**
+   * Shows static min/max labels on the sides of the range slider
+   */
+  showLabels?: boolean;
+  /**
+   * Shows a thick line from min to value
+   */
+  showRange?: boolean;
+  /**
+   * Shows clickable tick marks and labels at the given interval (`step`/`tickInterval`)
+   */
+  showTicks?: boolean;
+  /**
+   * Shows a tooltip styled value
+   */
+  showValue?: boolean;
+  /**
+   * Specified ticks at specified values
+   */
+  ticks?: EuiRangeTick[];
+  /**
+   * Modifies the number of tick marks and at what interval
+   */
+  tickInterval?: number;
+  /**
+   * Appends to the tooltip
+   */
+  valueAppend?: ReactNode;
+  /**
+   * Prepends to the tooltip
+   */
+  valuePrepend?: ReactNode;
 
-    this.preventPopoverClose = false;
-  }
+  onChange?: (
+    event:
+      | React.ChangeEvent<HTMLInputElement>
+      | React.MouseEvent<HTMLButtonElement>,
+    isValid: boolean
+  ) => void;
+}
+
+export class EuiRange extends Component<EuiRangeProps> {
+  static defaultProps = {
+    min: 0,
+    max: 100,
+    step: 1,
+    fullWidth: false,
+    compressed: false,
+    isLoading: false,
+    showLabels: false,
+    showInput: false,
+    showRange: false,
+    showTicks: false,
+    showValue: false,
+    levels: [],
+  };
+
+  preventPopoverClose: boolean = false;
 
-  handleOnChange = e => {
+  state = {
+    id: this.props.id || makeId(),
+    isPopoverOpen: false,
+  };
+
+  handleOnChange = (
+    e: React.ChangeEvent<HTMLInputElement> | React.MouseEvent<HTMLButtonElement>
+  ) => {
     const isValid = isWithinRange(
       this.props.min,
       this.props.max,
-      e.target.value
+      e.currentTarget.value
     );
-    this.props.onChange(e, isValid);
+    if (this.props.onChange) {
+      this.props.onChange(e, isValid);
+    }
   };
 
   get isValid() {
-    return isWithinRange(this.props.min, this.props.max, this.props.value);
+    return isWithinRange(
+      this.props.min,
+      this.props.max,
+      this.props.value || ''
+    );
   }
 
-  onInputFocus = e => {
+  onInputFocus = (e: React.FocusEvent<HTMLInputElement>) => {
     if (this.props.onFocus) {
       this.props.onFocus(e);
     }
@@ -47,7 +127,7 @@ export class EuiRange extends Component {
     });
   };
 
-  onInputBlur = e =>
+  onInputBlur = (e: React.FocusEvent<HTMLInputElement>) =>
     setTimeout(() => {
       // Safari does not recognize any focus-related eventing for input[type=range]
       // making it impossible to capture its state using active/focus/relatedTarget
@@ -109,7 +189,7 @@ export class EuiRange extends Component {
     const showInputOnly = showInput === 'inputWithPopover';
     const canShowDropdown = showInputOnly && !readOnly && !disabled;
 
-    const theInput = !!showInput ? (
+    const theInput: ReactNode = !!showInput ? (
       <EuiRangeInput
         id={id}
         min={min}
@@ -130,9 +210,7 @@ export class EuiRange extends Component {
         autoSize={!showInputOnly}
         {...rest}
       />
-    ) : (
-      undefined
-    );
+    ) : null;
 
     const classes = classNames('euiRange', className);
 
@@ -182,11 +260,13 @@ export class EuiRange extends Component {
             style={style}
             showTicks={showTicks}
             showRange={showRange}
-            tabIndex={showInput ? -1 : tabIndex || null}
+            tabIndex={showInput ? -1 : tabIndex}
             onMouseDown={
-              showInputOnly ? () => (this.preventPopoverClose = true) : null
+              showInputOnly
+                ? () => (this.preventPopoverClose = true)
+                : undefined
             }
-            onFocus={showInput === true ? null : onFocus}
+            onFocus={showInput === true ? undefined : onFocus}
             onBlur={showInputOnly ? this.onInputBlur : onBlur}
             {...rest}
           />
@@ -221,7 +301,7 @@ export class EuiRange extends Component {
     const thePopover = showInputOnly ? (
       <EuiInputPopover
         className="euiRange__popover"
-        input={theInput}
+        input={theInput!} // `showInputOnly` confirms existence
         fullWidth={fullWidth}
         isOpen={this.state.isPopoverOpen}
         closePopover={this.closePopover}
@@ -235,85 +315,3 @@ export class EuiRange extends Component {
     return thePopover ? thePopover : theRange;
   }
 }
-
-EuiRange.propTypes = {
-  name: PropTypes.string,
-  id: PropTypes.string,
-  min: PropTypes.number.isRequired,
-  max: PropTypes.number.isRequired,
-  step: PropTypes.number,
-  value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  fullWidth: PropTypes.bool,
-  compressed: PropTypes.bool,
-  disabled: PropTypes.bool,
-  /**
-   * Shows static min/max labels on the sides of the range slider
-   */
-  showLabels: PropTypes.bool,
-  /**
-   * Pass `true` to displays an extra input control for direct manipulation.
-   * Pass `'inputWithPopover'` to only show the input but show the range in a dropdown.
-   */
-  showInput: PropTypes.oneOf([true, false, 'inputWithPopover']),
-  /**
-   * Shows clickable tick marks and labels at the given interval (`step`/`tickInterval`)
-   */
-  showTicks: PropTypes.bool,
-  /**
-   * Modifies the number of tick marks and at what interval
-   */
-  tickInterval: PropTypes.number,
-  /**
-   * Specified ticks at specified values
-   */
-  ticks: PropTypes.arrayOf(
-    PropTypes.shape({
-      value: PropTypes.number.isRequired,
-      label: PropTypes.node.isRequired,
-    })
-  ),
-  /**
-   * Function signature: `(event, isValid)`
-   */
-  onChange: PropTypes.func,
-  /**
-   * Create colored indicators for certain intervals
-   */
-  levels: PropTypes.arrayOf(
-    PropTypes.shape({
-      min: PropTypes.number,
-      max: PropTypes.number,
-      color: PropTypes.oneOf(LEVEL_COLORS),
-    })
-  ),
-  /**
-   * Shows a thick line from min to value
-   */
-  showRange: PropTypes.bool,
-  /**
-   * Shows a tooltip styled value
-   */
-  showValue: PropTypes.bool,
-  /**
-   * Appends to the tooltip
-   */
-  valueAppend: PropTypes.node,
-  /**
-   * Prepends to the tooltip
-   */
-  valuePrepend: PropTypes.node,
-};
-
-EuiRange.defaultProps = {
-  min: 0,
-  max: 100,
-  step: 1,
-  fullWidth: false,
-  compressed: false,
-  showLabels: false,
-  showInput: false,
-  showRange: false,
-  showTicks: false,
-  showValue: false,
-  levels: [],
-};
diff --git a/src/components/form/range/range_input.js b/src/components/form/range/range_input.tsx
similarity index 53%
rename from src/components/form/range/range_input.js
rename to src/components/form/range/range_input.tsx
index d7e240f9411..2d7b54189fb 100644
--- a/src/components/form/range/range_input.js
+++ b/src/components/form/range/range_input.tsx
@@ -1,9 +1,18 @@
-import React from 'react';
-import PropTypes from 'prop-types';
+import React, { FunctionComponent } from 'react';
 
-import { EuiFieldNumber } from '../field_number';
+import { EuiFieldNumber, EuiFieldNumberProps } from '../field_number';
 
-export const EuiRangeInput = ({
+export interface EuiRangeInputProps
+  extends Omit<EuiFieldNumberProps, 'max' | 'min' | 'value'> {
+  autoSize?: boolean;
+  digitTolerance: number;
+  max: number;
+  min: number;
+  side?: 'min' | 'max';
+  value: string | number;
+}
+
+export const EuiRangeInput: FunctionComponent<EuiRangeInputProps> = ({
   min,
   max,
   step,
@@ -12,10 +21,10 @@ export const EuiRangeInput = ({
   compressed,
   onChange,
   name,
-  side,
+  side = 'max',
   digitTolerance,
   fullWidth,
-  autoSize,
+  autoSize = true,
   ...rest
 }) => {
   // Chrome will properly size the input based on the max value, but FF & IE do not.
@@ -42,22 +51,3 @@ export const EuiRangeInput = ({
     />
   );
 };
-
-EuiRangeInput.propTypes = {
-  min: PropTypes.number.isRequired,
-  max: PropTypes.number.isRequired,
-  step: PropTypes.number,
-  value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
-  compressed: PropTypes.bool,
-  onChange: PropTypes.func,
-  name: PropTypes.string,
-  digitTolerance: PropTypes.number.isRequired,
-  side: PropTypes.oneOf(['min', 'max']),
-  fullWidth: PropTypes.bool,
-  autoSize: PropTypes.bool,
-  inputRef: PropTypes.func,
-};
-EuiRangeInput.defaultProps = {
-  side: 'max',
-  autoSize: true,
-};