diff --git a/CHANGELOG.md b/CHANGELOG.md
index 217a8248753..17201b3d117 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,7 @@
 
 - Centered the square of the `popout` glyph in the artboard ([#2120](https://github.com/elastic/eui/pull/2120))
 - Added `useInnerText` and `EuiInnerText` component utilities for retrieving text content of elements ([#2100](https://github.com/elastic/eui/pull/2100))
+- Converted `EuiRangeHightlight`, `EuiRangeLabel`, `EuiRangeLevels`, `EuiRangeSlider`, `EuiRangeThumb`, `EuiRangeTicks`, `EuiRangeTrack`, and `EuiRangeWrapper` to TypeScript ([#2124](https://github.com/elastic/eui/pull/2124))
 
 **Bug fixes**
 
diff --git a/src/components/form/range/__snapshots__/dual_range.test.js.snap b/src/components/form/range/__snapshots__/dual_range.test.js.snap
index e2f8b4f92be..668f64bd7fb 100644
--- a/src/components/form/range/__snapshots__/dual_range.test.js.snap
+++ b/src/components/form/range/__snapshots__/dual_range.test.js.snap
@@ -427,7 +427,6 @@ exports[`EuiDualRange props ticks should render 1`] = `
         class="euiRangeTick"
         style="width:16.666666666666664%"
         tabindex="-1"
-        title="0"
         type="button"
         value="0"
       >
@@ -437,7 +436,6 @@ exports[`EuiDualRange props ticks should render 1`] = `
         class="euiRangeTick"
         style="width:16.666666666666664%"
         tabindex="-1"
-        title="20"
         type="button"
         value="20"
       >
@@ -447,7 +445,6 @@ exports[`EuiDualRange props ticks should render 1`] = `
         class="euiRangeTick"
         style="width:16.666666666666664%"
         tabindex="-1"
-        title="40"
         type="button"
         value="40"
       >
@@ -457,7 +454,6 @@ exports[`EuiDualRange props ticks should render 1`] = `
         class="euiRangeTick"
         style="width:16.666666666666664%"
         tabindex="-1"
-        title="60"
         type="button"
         value="60"
       >
@@ -467,7 +463,6 @@ exports[`EuiDualRange props ticks should render 1`] = `
         class="euiRangeTick"
         style="width:16.666666666666664%"
         tabindex="-1"
-        title="80"
         type="button"
         value="80"
       >
@@ -477,7 +472,6 @@ exports[`EuiDualRange props ticks should render 1`] = `
         class="euiRangeTick"
         style="width:16.666666666666664%"
         tabindex="-1"
-        title="100"
         type="button"
         value="100"
       >
diff --git a/src/components/form/range/__snapshots__/range.test.js.snap b/src/components/form/range/__snapshots__/range.test.js.snap
index ccdc4238576..32d5d964d35 100644
--- a/src/components/form/range/__snapshots__/range.test.js.snap
+++ b/src/components/form/range/__snapshots__/range.test.js.snap
@@ -321,7 +321,6 @@ exports[`EuiRange props ticks should render 1`] = `
         class="euiRangeTick"
         style="width:16.666666666666664%"
         tabindex="-1"
-        title="0"
         type="button"
         value="0"
       >
@@ -331,7 +330,6 @@ exports[`EuiRange props ticks should render 1`] = `
         class="euiRangeTick"
         style="width:16.666666666666664%"
         tabindex="-1"
-        title="20"
         type="button"
         value="20"
       >
@@ -341,7 +339,6 @@ exports[`EuiRange props ticks should render 1`] = `
         class="euiRangeTick"
         style="width:16.666666666666664%"
         tabindex="-1"
-        title="40"
         type="button"
         value="40"
       >
@@ -351,7 +348,6 @@ exports[`EuiRange props ticks should render 1`] = `
         class="euiRangeTick"
         style="width:16.666666666666664%"
         tabindex="-1"
-        title="60"
         type="button"
         value="60"
       >
@@ -361,7 +357,6 @@ exports[`EuiRange props ticks should render 1`] = `
         class="euiRangeTick"
         style="width:16.666666666666664%"
         tabindex="-1"
-        title="80"
         type="button"
         value="80"
       >
@@ -371,7 +366,6 @@ exports[`EuiRange props ticks should render 1`] = `
         class="euiRangeTick"
         style="width:16.666666666666664%"
         tabindex="-1"
-        title="100"
         type="button"
         value="100"
       >
diff --git a/src/components/form/range/__snapshots__/range_levels.test.js.snap b/src/components/form/range/__snapshots__/range_levels.test.tsx.snap
similarity index 100%
rename from src/components/form/range/__snapshots__/range_levels.test.js.snap
rename to src/components/form/range/__snapshots__/range_levels.test.tsx.snap
diff --git a/src/components/form/range/__snapshots__/range_track.test.js.snap b/src/components/form/range/__snapshots__/range_track.test.tsx.snap
similarity index 94%
rename from src/components/form/range/__snapshots__/range_track.test.js.snap
rename to src/components/form/range/__snapshots__/range_track.test.tsx.snap
index 9cb1a9135cb..84425561d49 100644
--- a/src/components/form/range/__snapshots__/range_track.test.js.snap
+++ b/src/components/form/range/__snapshots__/range_track.test.tsx.snap
@@ -13,7 +13,6 @@ exports[`EuiRangeTrack is rendered 1`] = `
       class="euiRangeTick"
       style="width:9.090909090909092%"
       tabindex="-1"
-      title="0"
       type="button"
       value="0"
     >
@@ -23,7 +22,6 @@ exports[`EuiRangeTrack is rendered 1`] = `
       class="euiRangeTick"
       style="width:9.090909090909092%"
       tabindex="-1"
-      title="10"
       type="button"
       value="10"
     >
@@ -33,7 +31,6 @@ exports[`EuiRangeTrack is rendered 1`] = `
       class="euiRangeTick"
       style="width:9.090909090909092%"
       tabindex="-1"
-      title="20"
       type="button"
       value="20"
     >
@@ -43,7 +40,6 @@ exports[`EuiRangeTrack is rendered 1`] = `
       class="euiRangeTick"
       style="width:9.090909090909092%"
       tabindex="-1"
-      title="30"
       type="button"
       value="30"
     >
@@ -53,7 +49,6 @@ exports[`EuiRangeTrack is rendered 1`] = `
       class="euiRangeTick"
       style="width:9.090909090909092%"
       tabindex="-1"
-      title="40"
       type="button"
       value="40"
     >
@@ -63,7 +58,6 @@ exports[`EuiRangeTrack is rendered 1`] = `
       class="euiRangeTick"
       style="width:9.090909090909092%"
       tabindex="-1"
-      title="50"
       type="button"
       value="50"
     >
@@ -73,7 +67,6 @@ exports[`EuiRangeTrack is rendered 1`] = `
       class="euiRangeTick"
       style="width:9.090909090909092%"
       tabindex="-1"
-      title="60"
       type="button"
       value="60"
     >
@@ -83,7 +76,6 @@ exports[`EuiRangeTrack is rendered 1`] = `
       class="euiRangeTick"
       style="width:9.090909090909092%"
       tabindex="-1"
-      title="70"
       type="button"
       value="70"
     >
@@ -93,7 +85,6 @@ exports[`EuiRangeTrack is rendered 1`] = `
       class="euiRangeTick"
       style="width:9.090909090909092%"
       tabindex="-1"
-      title="80"
       type="button"
       value="80"
     >
@@ -103,7 +94,6 @@ exports[`EuiRangeTrack is rendered 1`] = `
       class="euiRangeTick"
       style="width:9.090909090909092%"
       tabindex="-1"
-      title="90"
       type="button"
       value="90"
     >
@@ -113,7 +103,6 @@ exports[`EuiRangeTrack is rendered 1`] = `
       class="euiRangeTick"
       style="width:9.090909090909092%"
       tabindex="-1"
-      title="100"
       type="button"
       value="100"
     >
diff --git a/src/components/form/range/dual_range.js b/src/components/form/range/dual_range.js
index 898851fefb1..3d3a63f4dc6 100644
--- a/src/components/form/range/dual_range.js
+++ b/src/components/form/range/dual_range.js
@@ -297,7 +297,7 @@ export class EuiDualRange extends Component {
             showTicks={showTicks}
             hasFocus={this.state.hasFocus}
             aria-hidden={true}
-            tabIndex={'-1'}
+            tabIndex={-1}
             showRange={showRange}
             {...rest}
           />
diff --git a/src/components/form/range/index.d.ts b/src/components/form/range/index.d.ts
index 8fc453998bf..90a35463fe0 100644
--- a/src/components/form/range/index.d.ts
+++ b/src/components/form/range/index.d.ts
@@ -2,9 +2,29 @@ import { CommonProps, Omit } 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
    *
@@ -15,7 +35,7 @@ declare module '@elastic/eui' {
     compressed?: boolean;
     fullWidth?: boolean;
     id?: string;
-    levels?: Array<{ min?: number; max?: number; color?: EuiRangeLevelColor }>;
+    levels?: EuiRangeLevel[];
     // `min` and `max` are optional in HTML but required for our component,
     // so we override them.
     max: number;
diff --git a/src/components/form/range/range.js b/src/components/form/range/range.js
index 9940978692a..6090bc75012 100644
--- a/src/components/form/range/range.js
+++ b/src/components/form/range/range.js
@@ -87,7 +87,7 @@ export class EuiRange extends Component {
             style={style}
             showTicks={showTicks}
             showRange={showRange}
-            tabIndex={showInput ? '-1' : tabIndex || null}
+            tabIndex={showInput ? -1 : tabIndex || null}
             {...rest}
           />
 
diff --git a/src/components/form/range/range_highlight.js b/src/components/form/range/range_highlight.tsx
similarity index 69%
rename from src/components/form/range/range_highlight.js
rename to src/components/form/range/range_highlight.tsx
index 948267878b2..f7ea22812d8 100644
--- a/src/components/form/range/range_highlight.js
+++ b/src/components/form/range/range_highlight.tsx
@@ -1,8 +1,16 @@
-import React from 'react';
-import PropTypes from 'prop-types';
+import React, { FunctionComponent } from 'react';
 import classNames from 'classnames';
 
-export const EuiRangeHighlight = ({
+export interface EuiRangeHighlightProps {
+  hasFocus?: boolean;
+  showTicks?: boolean;
+  lowerValue: number;
+  upperValue: number;
+  max: number;
+  min: number;
+}
+
+export const EuiRangeHighlight: FunctionComponent<EuiRangeHighlightProps> = ({
   hasFocus,
   showTicks,
   lowerValue,
@@ -33,12 +41,3 @@ export const EuiRangeHighlight = ({
     </div>
   );
 };
-
-EuiRangeHighlight.propTypes = {
-  hasFocus: PropTypes.bool,
-  showTicks: PropTypes.bool,
-  lowerValue: PropTypes.number.isRequired,
-  upperValue: PropTypes.number.isRequired,
-  max: PropTypes.number.isRequired,
-  min: PropTypes.number.isRequired,
-};
diff --git a/src/components/form/range/range_label.js b/src/components/form/range/range_label.js
deleted file mode 100644
index 25d0a6e5235..00000000000
--- a/src/components/form/range/range_label.js
+++ /dev/null
@@ -1,17 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-
-export const EuiRangeLabel = ({ children, disabled, side }) => {
-  const classes = classNames('euiRangeLabel', `euiRangeLabel--${side}`, {
-    'euiRangeLabel--isDisabled': disabled,
-  });
-  return <label className={classes}>{children}</label>;
-};
-
-EuiRangeLabel.propTypes = {
-  side: PropTypes.oneOf(['min', 'max']),
-};
-EuiRangeLabel.defaultProps = {
-  side: 'max',
-};
diff --git a/src/components/form/range/range_label.tsx b/src/components/form/range/range_label.tsx
new file mode 100644
index 00000000000..a3048594069
--- /dev/null
+++ b/src/components/form/range/range_label.tsx
@@ -0,0 +1,19 @@
+import React, { FunctionComponent } from 'react';
+import classNames from 'classnames';
+
+export interface EuiRangeLabelProps {
+  children: string | number;
+  disabled?: boolean;
+  side?: 'min' | 'max';
+}
+
+export const EuiRangeLabel: FunctionComponent<EuiRangeLabelProps> = ({
+  children,
+  disabled,
+  side = 'max',
+}) => {
+  const classes = classNames('euiRangeLabel', `euiRangeLabel--${side}`, {
+    'euiRangeLabel--isDisabled': disabled,
+  });
+  return <label className={classes}>{children}</label>;
+};
diff --git a/src/components/form/range/range_levels.test.js b/src/components/form/range/range_levels.test.tsx
similarity index 100%
rename from src/components/form/range/range_levels.test.js
rename to src/components/form/range/range_levels.test.tsx
diff --git a/src/components/form/range/range_levels.js b/src/components/form/range/range_levels.tsx
similarity index 57%
rename from src/components/form/range/range_levels.js
rename to src/components/form/range/range_levels.tsx
index c3a84bc5c39..b59c63cf852 100644
--- a/src/components/form/range/range_levels.js
+++ b/src/components/form/range/range_levels.tsx
@@ -1,11 +1,35 @@
-import React from 'react';
-import PropTypes from 'prop-types';
+import React, { FunctionComponent } from 'react';
 import classNames from 'classnames';
 
-export const LEVEL_COLORS = ['primary', 'success', 'warning', 'danger'];
+export type EuiRangeLevelColor = 'primary' | 'success' | 'warning' | 'danger';
 
-export const EuiRangeLevels = ({ levels, max, min, showTicks }) => {
-  const validateLevelIsInRange = level => {
+export const LEVEL_COLORS: EuiRangeLevelColor[] = [
+  'primary',
+  'success',
+  'warning',
+  'danger',
+];
+
+export interface EuiRangeLevel {
+  min: number;
+  max: number;
+  color: EuiRangeLevelColor;
+}
+
+export interface EuiRangeLevelsProps {
+  levels?: EuiRangeLevel[];
+  max: number;
+  min: number;
+  showTicks?: boolean;
+}
+
+export const EuiRangeLevels: FunctionComponent<EuiRangeLevelsProps> = ({
+  levels = [],
+  max,
+  min,
+  showTicks,
+}) => {
+  const validateLevelIsInRange = (level: EuiRangeLevel) => {
     if (level.min < min) {
       throw new Error(
         `The level min of ${level.min} is lower than the min value of ${min}.`
@@ -40,16 +64,3 @@ export const EuiRangeLevels = ({ levels, max, min, showTicks }) => {
     </div>
   );
 };
-
-EuiRangeLevels.propTypes = {
-  levels: PropTypes.arrayOf(
-    PropTypes.shape({
-      min: PropTypes.number.isRequired,
-      max: PropTypes.number.isRequired,
-      color: PropTypes.oneOf(LEVEL_COLORS).isRequired,
-    })
-  ),
-  max: PropTypes.number.isRequired,
-  min: PropTypes.number.isRequired,
-  showTicks: PropTypes.bool,
-};
diff --git a/src/components/form/range/range_slider.js b/src/components/form/range/range_slider.tsx
similarity index 57%
rename from src/components/form/range/range_slider.js
rename to src/components/form/range/range_slider.tsx
index d0486689338..a9120f0fc74 100644
--- a/src/components/form/range/range_slider.js
+++ b/src/components/form/range/range_slider.tsx
@@ -1,8 +1,32 @@
-import React from 'react';
-import PropTypes from 'prop-types';
+import React, {
+  ChangeEventHandler,
+  FunctionComponent,
+  InputHTMLAttributes,
+  Ref,
+  forwardRef,
+} from 'react';
 import classNames from 'classnames';
 
-export const EuiRangeSlider = React.forwardRef(
+import { CommonProps } from '../../common';
+
+export type EuiRangeSliderProps = InputHTMLAttributes<HTMLInputElement> &
+  CommonProps & {
+    id?: string;
+    name?: string;
+    min: number;
+    max: number;
+    step?: number;
+    hasFocus?: boolean;
+    showRange?: boolean;
+    showTicks?: boolean;
+    disabled?: boolean;
+    tabIndex?: number;
+    onChange?: ChangeEventHandler<HTMLInputElement>;
+  };
+
+export const EuiRangeSlider: FunctionComponent<
+  EuiRangeSliderProps
+> = forwardRef(
   (
     {
       className,
@@ -21,7 +45,7 @@ export const EuiRangeSlider = React.forwardRef(
       hasFocus,
       ...rest
     },
-    ref
+    ref: Ref<HTMLInputElement>
   ) => {
     const classes = classNames(
       'euiRangeSlider',
@@ -52,22 +76,3 @@ export const EuiRangeSlider = React.forwardRef(
     );
   }
 );
-
-EuiRangeSlider.propTypes = {
-  id: PropTypes.string,
-  min: PropTypes.number.isRequired,
-  max: PropTypes.number.isRequired,
-  name: PropTypes.string,
-  step: PropTypes.number,
-  onChange: PropTypes.func,
-  tabIndex: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  value: PropTypes.oneOfType([
-    PropTypes.number,
-    PropTypes.string,
-    PropTypes.arrayOf(
-      PropTypes.oneOfType([PropTypes.number, PropTypes.string])
-    ),
-  ]),
-  hasFocus: PropTypes.bool,
-  showRange: PropTypes.bool,
-};
diff --git a/src/components/form/range/range_thumb.js b/src/components/form/range/range_thumb.js
deleted file mode 100644
index 54e907b3485..00000000000
--- a/src/components/form/range/range_thumb.js
+++ /dev/null
@@ -1,37 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-
-export const EuiRangeThumb = ({
-  min,
-  max,
-  value,
-  disabled,
-  showInput,
-  showTicks,
-  ...rest
-}) => {
-  const classes = classNames('euiRangeThumb', {
-    'euiRangeThumb--hasTicks': showTicks,
-  });
-  return (
-    <div
-      className={classes}
-      role="slider"
-      aria-valuemin={min}
-      aria-valuemax={max}
-      aria-valuenow={Number(value)}
-      aria-disabled={!!disabled}
-      tabIndex={showInput || !!disabled ? '-1' : '0'}
-      {...rest}
-    />
-  );
-};
-
-EuiRangeThumb.propTypes = {
-  min: PropTypes.number.isRequired,
-  max: PropTypes.number.isRequired,
-  value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  showInput: PropTypes.bool,
-  showTicks: PropTypes.bool,
-};
diff --git a/src/components/form/range/range_thumb.tsx b/src/components/form/range/range_thumb.tsx
new file mode 100644
index 00000000000..1bcfa532644
--- /dev/null
+++ b/src/components/form/range/range_thumb.tsx
@@ -0,0 +1,40 @@
+import React, { FunctionComponent, HTMLAttributes } from 'react';
+import classNames from 'classnames';
+
+import { CommonProps } from '../../common';
+
+export type EuiRangeThumbProps = HTMLAttributes<HTMLDivElement> &
+  CommonProps & {
+    min: number;
+    max: number;
+    value?: number | string;
+    disabled?: boolean;
+    showInput?: boolean;
+    showTicks?: boolean;
+  };
+
+export const EuiRangeThumb: FunctionComponent<EuiRangeThumbProps> = ({
+  min,
+  max,
+  value,
+  disabled,
+  showInput,
+  showTicks,
+  ...rest
+}) => {
+  const classes = classNames('euiRangeThumb', {
+    'euiRangeThumb--hasTicks': showTicks,
+  });
+  return (
+    <div
+      className={classes}
+      role="slider"
+      aria-valuemin={min}
+      aria-valuemax={max}
+      aria-valuenow={Number(value)}
+      aria-disabled={!!disabled}
+      tabIndex={showInput || !!disabled ? -1 : 0}
+      {...rest}
+    />
+  );
+};
diff --git a/src/components/form/range/range_ticks.js b/src/components/form/range/range_ticks.tsx
similarity index 63%
rename from src/components/form/range/range_ticks.js
rename to src/components/form/range/range_ticks.tsx
index b45095af0c5..545707c5d54 100644
--- a/src/components/form/range/range_ticks.js
+++ b/src/components/form/range/range_ticks.tsx
@@ -1,10 +1,35 @@
-import React from 'react';
-import PropTypes from 'prop-types';
+import React, {
+  ButtonHTMLAttributes,
+  MouseEventHandler,
+  FunctionComponent,
+  ReactNode,
+} from 'react';
 import classNames from 'classnames';
-
 import find from 'lodash/find';
 
-export const EuiRangeTicks = ({
+import { Omit } from '../../common';
+import { useInnerText } from '../../inner_text';
+
+export interface EuiRangeTick {
+  value: number;
+  label: ReactNode;
+}
+
+export type EuiRangeTicksProps = Omit<
+  ButtonHTMLAttributes<HTMLButtonElement>,
+  'value'
+> & {
+  ticks?: EuiRangeTick[];
+  tickSequence: number[];
+  value?: number | string | Array<string | number>;
+  min: number;
+  max: number;
+  interval?: number;
+  disabled?: boolean;
+  onChange?: MouseEventHandler<HTMLButtonElement>;
+};
+
+export const EuiRangeTicks: FunctionComponent<EuiRangeTicksProps> = ({
   disabled,
   onChange,
   ticks,
@@ -12,7 +37,7 @@ export const EuiRangeTicks = ({
   value,
   max,
   min,
-  interval,
+  interval = 1,
 }) => {
   // Calculate the width of each tick mark
   const percentageWidth = (interval / (max - min + interval)) * 100;
@@ -26,7 +51,7 @@ export const EuiRangeTicks = ({
   return (
     <div className="euiRangeTicks" style={ticksStyle}>
       {tickSequence.map(tickValue => {
-        const tickStyle = {};
+        const tickStyle: { left?: string; width?: string } = {};
         let customTick;
         if (ticks) {
           customTick = find(ticks, o => o.value === tickValue);
@@ -46,6 +71,8 @@ export const EuiRangeTicks = ({
 
         const label = customTick ? customTick.label : tickValue;
 
+        const [ref, innerText] = useInnerText();
+
         return (
           <button
             type="button"
@@ -55,8 +82,9 @@ export const EuiRangeTicks = ({
             disabled={disabled}
             onClick={onChange}
             style={tickStyle}
-            tabIndex="-1"
-            title={label}>
+            tabIndex={-1}
+            ref={ref}
+            title={typeof label === 'string' ? label : innerText}>
             {label}
           </button>
         );
@@ -64,25 +92,3 @@ export const EuiRangeTicks = ({
     </div>
   );
 };
-
-EuiRangeTicks.propTypes = {
-  disabled: PropTypes.bool,
-  onChange: PropTypes.func,
-  ticks: PropTypes.arrayOf(
-    PropTypes.shape({
-      value: PropTypes.number.isRequired,
-      label: PropTypes.node.isRequired,
-    })
-  ),
-  tickSequence: PropTypes.arrayOf(PropTypes.number).isRequired,
-  value: PropTypes.oneOfType([
-    PropTypes.number,
-    PropTypes.string,
-    PropTypes.arrayOf(
-      PropTypes.oneOfType([PropTypes.number, PropTypes.string])
-    ),
-  ]),
-  min: PropTypes.number.isRequired,
-  max: PropTypes.number.isRequired,
-  interval: PropTypes.number,
-};
diff --git a/src/components/form/range/range_tooltip.js b/src/components/form/range/range_tooltip.tsx
similarity index 68%
rename from src/components/form/range/range_tooltip.js
rename to src/components/form/range/range_tooltip.tsx
index 53e13d9312f..2795deacf3e 100644
--- a/src/components/form/range/range_tooltip.js
+++ b/src/components/form/range/range_tooltip.tsx
@@ -1,8 +1,17 @@
-import React from 'react';
-import PropTypes from 'prop-types';
+import React, { FunctionComponent, ReactNode } from 'react';
 import classNames from 'classnames';
 
-export const EuiRangeTooltip = ({
+export interface EuiRangeTooltipProps {
+  value?: number | string;
+  valueAppend?: ReactNode;
+  valuePrepend?: ReactNode;
+  max: number;
+  min: number;
+  name?: string;
+  showTicks?: boolean;
+}
+
+export const EuiRangeTooltip: FunctionComponent<EuiRangeTooltipProps> = ({
   value,
   valueAppend,
   valuePrepend,
@@ -12,7 +21,13 @@ export const EuiRangeTooltip = ({
   showTicks,
 }) => {
   // Calculate the left position based on value
-  const decimal = (value - min) / (max - min);
+  let val = 0;
+  if (typeof value === 'number') {
+    val = value;
+  } else if (typeof value === 'string') {
+    val = parseFloat(value);
+  }
+  const decimal = (val - min) / (max - min);
   // Must be between 0-100%
   let valuePosition = decimal <= 1 ? decimal : 1;
   valuePosition = valuePosition >= 0 ? valuePosition : 0;
@@ -49,12 +64,3 @@ export const EuiRangeTooltip = ({
     </div>
   );
 };
-
-EuiRangeTooltip.propTypes = {
-  value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  valueAppend: PropTypes.node,
-  valuePrepend: PropTypes.node,
-  max: PropTypes.number.isRequired,
-  min: PropTypes.number.isRequired,
-  name: PropTypes.string,
-};
diff --git a/src/components/form/range/range_track.test.js b/src/components/form/range/range_track.test.tsx
similarity index 100%
rename from src/components/form/range/range_track.test.js
rename to src/components/form/range/range_track.test.tsx
diff --git a/src/components/form/range/range_track.js b/src/components/form/range/range_track.tsx
similarity index 77%
rename from src/components/form/range/range_track.js
rename to src/components/form/range/range_track.tsx
index 8fdc3abd53f..7464f33eb23 100644
--- a/src/components/form/range/range_track.js
+++ b/src/components/form/range/range_track.tsx
@@ -1,17 +1,29 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
+import React, { Component, MouseEventHandler } from 'react';
 import classNames from 'classnames';
 
 import range from 'lodash/range';
 
 import { isEvenlyDivisibleBy } from '../../../services';
-import { EuiRangeLevels, LEVEL_COLORS } from './range_levels';
-import { EuiRangeTicks } from './range_ticks';
+import { EuiRangeLevels, EuiRangeLevel, LEVEL_COLORS } from './range_levels';
+import { EuiRangeTicks, EuiRangeTick } from './range_ticks';
 
 export { LEVEL_COLORS };
 
-export class EuiRangeTrack extends Component {
-  validateValueIsInStep = value => {
+export interface EuiRangeTrackProps {
+  min: number;
+  max: number;
+  step?: number;
+  value?: number | string | Array<string | number>;
+  disabled?: boolean;
+  showTicks?: boolean;
+  tickInterval?: number;
+  ticks?: EuiRangeTick[];
+  onChange?: MouseEventHandler<HTMLButtonElement>;
+  levels?: EuiRangeLevel[];
+}
+
+export class EuiRangeTrack extends Component<EuiRangeTrackProps> {
+  validateValueIsInStep = (value: number) => {
     if (value < this.props.min) {
       throw new Error(
         `The value of ${value} is lower than the min value of ${
@@ -43,14 +55,24 @@ export class EuiRangeTrack extends Component {
     return value;
   };
 
-  calculateSequence = (min, max, interval) => {
+  calculateSequence = (
+    min: EuiRangeTrackProps['min'],
+    max: EuiRangeTrackProps['max'],
+    interval?: EuiRangeTrackProps['tickInterval']
+  ) => {
     // Loop from min to max, creating adding values at each interval
     // (adds a very small number to the max since `range` is not inclusive of the max value)
     const toBeInclusive = 0.000000001;
     return range(min, max + toBeInclusive, interval);
   };
 
-  calculateTicks = (min, max, step, tickInterval, customTicks) => {
+  calculateTicks = (
+    min: EuiRangeTrackProps['min'],
+    max: EuiRangeTrackProps['max'],
+    step?: EuiRangeTrackProps['step'],
+    tickInterval?: EuiRangeTrackProps['tickInterval'],
+    customTicks?: EuiRangeTick[]
+  ) => {
     let ticks;
 
     if (customTicks) {
@@ -101,7 +123,7 @@ export class EuiRangeTrack extends Component {
     this.validateValueIsInStep(max);
 
     let tickSequence;
-    const inputWrapperStyle = {};
+    const inputWrapperStyle: { marginLeft?: string; marginRight?: string } = {};
     if (showTicks) {
       tickSequence = this.calculateTicks(min, max, step, tickInterval, ticks);
 
@@ -150,32 +172,3 @@ export class EuiRangeTrack extends Component {
     );
   }
 }
-
-EuiRangeTrack.propTypes = {
-  min: PropTypes.number.isRequired,
-  max: PropTypes.number.isRequired,
-  step: PropTypes.number,
-  value: PropTypes.oneOfType([
-    PropTypes.number,
-    PropTypes.string,
-    PropTypes.arrayOf(
-      PropTypes.oneOfType([PropTypes.number, PropTypes.string])
-    ),
-  ]),
-  showTicks: PropTypes.bool,
-  tickInterval: PropTypes.number,
-  ticks: PropTypes.arrayOf(
-    PropTypes.shape({
-      value: PropTypes.number.isRequired,
-      label: PropTypes.node.isRequired,
-    })
-  ),
-  onChange: PropTypes.func,
-  levels: PropTypes.arrayOf(
-    PropTypes.shape({
-      min: PropTypes.number,
-      max: PropTypes.number,
-      color: PropTypes.oneOf(LEVEL_COLORS),
-    })
-  ),
-};
diff --git a/src/components/form/range/range_wrapper.js b/src/components/form/range/range_wrapper.js
deleted file mode 100644
index 68a4c1b7696..00000000000
--- a/src/components/form/range/range_wrapper.js
+++ /dev/null
@@ -1,21 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-
-export const LEVEL_COLORS = ['primary', 'success', 'warning', 'danger'];
-
-export const EuiRangeWrapper = ({ children, className, fullWidth }) => {
-  const classes = classNames(
-    'euiRangeWrapper',
-    {
-      'euiRangeWrapper--fullWidth': fullWidth,
-    },
-    className
-  );
-
-  return <div className={classes}>{children}</div>;
-};
-
-EuiRangeWrapper.propTypes = {
-  fullWidth: PropTypes.bool,
-};
diff --git a/src/components/form/range/range_wrapper.tsx b/src/components/form/range/range_wrapper.tsx
new file mode 100644
index 00000000000..78cb6783f21
--- /dev/null
+++ b/src/components/form/range/range_wrapper.tsx
@@ -0,0 +1,23 @@
+import React, { FunctionComponent } from 'react';
+import classNames from 'classnames';
+
+export interface EuiRangeWrapperProps {
+  className?: string;
+  fullWidth?: boolean;
+}
+
+export const EuiRangeWrapper: FunctionComponent<EuiRangeWrapperProps> = ({
+  children,
+  className,
+  fullWidth,
+}) => {
+  const classes = classNames(
+    'euiRangeWrapper',
+    {
+      'euiRangeWrapper--fullWidth': fullWidth,
+    },
+    className
+  );
+
+  return <div className={classes}>{children}</div>;
+};