From 6146f3d47e8e8f9606feb0874041bbb0fc6b9e6c Mon Sep 17 00:00:00 2001
From: Greg Thompson <thompson.glowe@gmail.com>
Date: Thu, 24 Jan 2019 16:39:17 -0600
Subject: [PATCH 01/27] WIP: range component break down; dualRange inital

---
 src/components/form/range/_range.scss        |  30 ++
 src/components/form/range/dual_range.js      | 233 +++++++++++
 src/components/form/range/index.js           |   1 +
 src/components/form/range/range.js           | 405 +++++--------------
 src/components/form/range/range_highlight.js |  26 ++
 src/components/form/range/range_input.js     |  36 ++
 src/components/form/range/range_label.js     |   8 +
 src/components/form/range/range_slider.js    |  34 ++
 src/components/form/range/range_tooltip.js   |  42 ++
 src/components/form/range/range_track.js     | 196 +++++++++
 src/components/form/range/range_wrapper.js   |  83 ++++
 11 files changed, 782 insertions(+), 312 deletions(-)
 create mode 100644 src/components/form/range/dual_range.js
 create mode 100644 src/components/form/range/range_highlight.js
 create mode 100644 src/components/form/range/range_input.js
 create mode 100644 src/components/form/range/range_label.js
 create mode 100644 src/components/form/range/range_slider.js
 create mode 100644 src/components/form/range/range_tooltip.js
 create mode 100644 src/components/form/range/range_track.js
 create mode 100644 src/components/form/range/range_wrapper.js

diff --git a/src/components/form/range/_range.scss b/src/components/form/range/_range.scss
index 5bbe22662ad..0035f0fbd7a 100644
--- a/src/components/form/range/_range.scss
+++ b/src/components/form/range/_range.scss
@@ -28,6 +28,7 @@
 }
 
 .euiRange__inputWrapper {
+  height: 100%; // Don't overflow `euiRange__wrapper`
   flex-grow: 1;
   position: relative; // for positioning ticks/levels
   align-self: flex-start; /* 3 */
@@ -368,6 +369,12 @@ $euiRangeLevelColors: (
     border-width: ($euiRangeThumbHeight / 2) 0;
     color: transparent;
   }
+
+  &--dual {
+    @include euiRangeThumbPerBrowser {
+      opacity: 0; // display: hidden doesn't work. Find something better
+    }
+  }
 }
 
 .euiRange__wrapper--hasRange .euiRange,
@@ -377,3 +384,26 @@ $euiRangeLevelColors: (
     border-color: transparentize($euiRangeTrackBorderColor, .6);
   }
 }
+
+.euiRange__thumb {
+  @include euiCustomControl($type: 'round');
+
+  cursor: pointer;
+  border-color: $euiRangeThumbBorderColor;
+  padding: 0;
+  height: $euiRangeThumbHeight;
+  width: $euiRangeThumbWidth;
+
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 50%;
+  margin-top: -($euiRangeThumbHeight / 2);
+  z-index: $euiZLevel2;
+
+  pointer-events: none;
+
+  &--hasTicks {
+    top: 25%;
+  }
+}
diff --git a/src/components/form/range/dual_range.js b/src/components/form/range/dual_range.js
new file mode 100644
index 00000000000..d3be1304867
--- /dev/null
+++ b/src/components/form/range/dual_range.js
@@ -0,0 +1,233 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+import { EuiRangeHighlight } from './range_highlight';
+import { EuiRangeInput } from './range_input';
+import { EuiRangeLabel } from './range_label';
+import { EuiRangeSlider } from './range_slider';
+import { EuiRangeTrack } from './range_track';
+import { EuiRangeWrapper } from './range_wrapper';
+
+export const LEVEL_COLORS = ['primary', 'success', 'warning', 'danger'];
+
+export class EuiDualRange extends Component {
+
+  _determineThumbMovement = (newVal, e) => {
+    // Determine closer thumb
+    let lower = this.props.value[0];
+    let upper = this.props.value[1];
+    if (Math.abs(lower - newVal) <= Math.abs(upper - newVal)) {
+      lower = newVal;
+    } else {
+      upper = newVal;
+    }
+    this._handleOnChange(lower, upper, e);
+  }
+
+  _handleOnChange = (lower, upper, e) => {
+    this.props.onChange([lower, upper], e);
+  }
+
+  handleSliderChange = (e) => {
+    this._determineThumbMovement(e.target.value, e);
+  }
+
+  handleLowerInputChange = (e) => {
+    this._handleOnChange(e.target.value, this.props.value[1], e);
+  }
+
+  handleUpperInputChange = (e) => {
+    this._handleOnChange(this.props.value[0], e.target.value, e);
+  }
+
+  calculateThumbPositionStyle = (value) => {
+    // Calculate the left position based on value
+    const decimal = (value - this.props.min) / (this.props.max - this.props.min);
+    // Must be between 0-100%
+    let valuePosition = decimal <= 1 ? decimal : 1;
+    valuePosition = valuePosition >= 0 ? valuePosition : 0;
+
+    //TODO: left should be 100% - (ratio of thumb width to track width)
+    return { left: `${valuePosition * 95.5}%` };
+  }
+
+  render() {
+
+    const {
+      className,
+      compressed,
+      disabled,
+      fullWidth,
+      id,
+      max,
+      min,
+      name,
+      step,
+      showLabels,
+      showInput,
+      showTicks,
+      tickInterval,
+      ticks, // eslint-disable-line no-unused-vars
+      levels,
+      showRange,
+      valueAppend, // eslint-disable-line no-unused-vars
+      value,
+      style,
+      ...rest
+    } = this.props;
+
+    const thumbClasses = classNames(
+      'euiRange__thumb',
+      {
+        'euiRange__thumb--hasTicks': showTicks
+      },
+    );
+    const lowerThumbStyle = this.calculateThumbPositionStyle(value[0]);
+    const upperThumbStyle = this.calculateThumbPositionStyle(value[1]);
+
+    return (
+      <EuiRangeWrapper
+        compressed={compressed}
+        disabled={disabled}
+        fullWidth={fullWidth}
+        showLabels={showLabels}
+        showTicks={showTicks}
+        levels={levels}
+        showRange={showRange}
+      >
+        {showInput && (
+          <EuiRangeInput
+            min={min}
+            max={value[1]}
+            step={step}
+            value={value[0]}
+            disabled={disabled}
+            compressed={compressed}
+            onChange={this.handleLowerInputChange}
+            name={name}
+          />
+        )}
+        {showLabels && <EuiRangeLabel side="min">{this.props.min}</EuiRangeLabel>}
+        <EuiRangeTrack
+          disabled={disabled}
+          max={max}
+          min={min}
+          step={step}
+          showTicks={showTicks}
+          tickInterval={tickInterval}
+          ticks={ticks}
+          levels={levels}
+          onChange={this.handleSliderChange}
+          value={value}
+        >
+          <EuiRangeSlider
+            id={id}
+            name={name}
+            className={`euiRange euiRange--dual ${className}`}
+            min={min}
+            max={max}
+            step={step}
+            value={value}
+            disabled={disabled}
+            onChange={this.handleSliderChange}
+            style={style}
+            tabIndex={'-1'}
+            {...rest}
+          />
+
+          <div className={thumbClasses} style={lowerThumbStyle} />
+          <div className={thumbClasses} style={upperThumbStyle} />
+
+          {showRange && (
+            <EuiRangeHighlight
+              min={min}
+              max={max}
+              lowerValue={value[0]}
+              upperValue={value[1]}
+            />
+          )}
+        </EuiRangeTrack>
+        {showLabels && <EuiRangeLabel side="max">{this.props.max}</EuiRangeLabel>}
+        {showInput && (
+          <EuiRangeInput
+            min={value[0]}
+            max={max}
+            step={step}
+            value={value[1]}
+            disabled={disabled}
+            compressed={compressed}
+            onChange={this.handleUpperInputChange}
+            name={name}
+          />
+        )}
+      </EuiRangeWrapper>
+    );
+  }
+}
+
+EuiDualRange.propTypes = {
+  name: PropTypes.string,
+  id: PropTypes.string,
+  min: PropTypes.number.isRequired,
+  max: PropTypes.number.isRequired,
+  step: PropTypes.number,
+  value: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])),
+  fullWidth: PropTypes.bool,
+  compressed: PropTypes.bool,
+  /**
+   * Shows static min/max labels on the sides of the range slider
+   */
+  showLabels: PropTypes.bool,
+  /**
+   * Displays an extra input control for direct manipulation
+   */
+  showInput: PropTypes.bool,
+  /**
+   * 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,
+    }),
+  ),
+  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
+   */
+  valueAppend: PropTypes.node,
+};
+
+EuiDualRange.defaultProps = {
+  min: 1,
+  max: 100,
+  fullWidth: false,
+  compressed: false,
+  showLabels: false,
+  showInput: false,
+  showTicks: false,
+  levels: [],
+};
diff --git a/src/components/form/range/index.js b/src/components/form/range/index.js
index 3f3c671156c..b536c93abd0 100644
--- a/src/components/form/range/index.js
+++ b/src/components/form/range/index.js
@@ -1 +1,2 @@
+export { EuiDualRange } from './dual_range';
 export { EuiRange } from './range';
diff --git a/src/components/form/range/range.js b/src/components/form/range/range.js
index 46dd286c67f..c0b7aba68ef 100644
--- a/src/components/form/range/range.js
+++ b/src/components/form/range/range.js
@@ -1,335 +1,116 @@
-import React, { Component } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
 
-import { range, find } from 'lodash';
-
-import { EuiFieldNumber } from '../field_number';
+import { EuiRangeHighlight } from './range_highlight';
+import { EuiRangeInput } from './range_input';
+import { EuiRangeLabel } from './range_label';
+import { EuiRangeSlider } from './range_slider';
+import { EuiRangeTooltip } from './range_tooltip';
+import { EuiRangeTrack } from './range_track';
+import { EuiRangeWrapper } from './range_wrapper';
 
 export const LEVEL_COLORS = ['primary', 'success', 'warning', 'danger'];
 
-export class EuiRange extends Component {
-  constructor(props) {
-    super(props);
-  }
-
-  render() {
-    const {
-      className,
-      compressed,
-      disabled,
-      fullWidth,
-      id,
-      max,
-      min,
-      name,
-      step,
-      showLabels,
-      showInput,
-      showTicks,
-      tickInterval,
-      ticks, // eslint-disable-line no-unused-vars
-      levels,
-      showRange,
-      showValue,
-      valueAppend, // eslint-disable-line no-unused-vars
-      onChange,
-      value,
-      style,
-      ...rest
-    } = this.props;
-
-    const classes = classNames(
-      'euiRange',
-      {
-        'euiRange--fullWidth': fullWidth,
-        'euiRange--compressed': compressed,
-      },
-      className
-    );
-
-    const wrapperClasses = classNames(
-      'euiRange__wrapper',
-      {
-        'euiRange__wrapper--fullWidth': fullWidth,
-        'euiRange__wrapper--compressed': compressed,
-        'euiRange__wrapper--disabled': disabled,
-        'euiRange__wrapper--hasLabels': showLabels,
-        'euiRange__wrapper--hasLevels': levels.length,
-        'euiRange__wrapper--hasRange': showRange,
-        'euiRange__wrapper--hasTicks': showTicks,
-        'euiRange__wrapper--hasValue': showValue,
-      },
-    );
+export const EuiRange = props => {
+
+  const {
+    className,
+    compressed,
+    disabled,
+    fullWidth,
+    id,
+    max,
+    min,
+    name,
+    step,
+    showLabels,
+    showInput,
+    showTicks,
+    tickInterval,
+    ticks, // eslint-disable-line no-unused-vars
+    levels,
+    showRange,
+    showValue,
+    valueAppend, // eslint-disable-line no-unused-vars
+    onChange,
+    value,
+    style,
+    ...rest
+  } = props;
 
-    let sliderTabIndex;
-    let extraInputNode;
-    if (showInput) {
-      // Chrome will properly size the input based on the max value, but FF & IE does not.
-      // Calculate the max-width of the input based on number of characters in min or max unit, whichever is greater.
-      // Add 2 to accomodate for input stepper
-      const maxWidthStyle = { maxWidth: `${Math.max(String(min).length, String(max).length) + 2}em` };
-
-      // Make this input the main control by disabling screen reader access to slider control
-      sliderTabIndex = '-1';
-
-      extraInputNode = (
-        <EuiFieldNumber
+  return (
+    <EuiRangeWrapper
+      compressed={compressed}
+      disabled={disabled}
+      fullWidth={fullWidth}
+      showLabels={showLabels}
+      showTicks={showTicks}
+      levels={levels}
+      showRange={showRange}
+      showValue={showValue}
+    >
+      {showLabels && <EuiRangeLabel side="min">{props.min}</EuiRangeLabel>}
+      <EuiRangeTrack
+        disabled={disabled}
+        max={max}
+        min={min}
+        step={step}
+        showTicks={showTicks}
+        tickInterval={tickInterval}
+        ticks={ticks}
+        levels={levels}
+        onChange={onChange}
+        value={value}
+      >
+        <EuiRangeSlider
+          id={id}
           name={name}
-          className="euiRange__extraInput"
+          className={`euiRange ${className}`}
           min={min}
           max={max}
           step={step}
-          value={Number(value)}
+          value={value}
           disabled={disabled}
-          compressed={compressed}
           onChange={onChange}
-          style={maxWidthStyle}
+          style={style}
+          tabIndex={showInput ? '-1' : '0'}
           {...rest}
         />
-      );
-    }
 
-    let tickObject;
-    const inputWrapperStyle = {};
-    if (showTicks) {
-      tickObject = calculateTicksObject(min, max, tickInterval || step || 1);
-
-      // Calculate if any extra margin should be added to the inputWrapper
-      // because of longer tick labels on the ends
-      const lengthOfMinLabel = String(tickObject.sequence[0]).length;
-      const lenghtOfMaxLabel = String(tickObject.sequence[tickObject.sequence.length - 1]).length;
-      const isLastTickTheMax = tickObject.sequence[tickObject.sequence.length - 1] === max;
-      if (lengthOfMinLabel > 2) {
-        inputWrapperStyle.marginLeft = `${(lengthOfMinLabel / 5)}em`;
-      }
-      if (isLastTickTheMax && lenghtOfMaxLabel > 2) {
-        inputWrapperStyle.marginRight = `${(lenghtOfMaxLabel / 5)}em`;
-      }
-    }
-
-    return (
-      <div className={wrapperClasses}>
-        {this.renderLabel('min')}
-
-        <div className="euiRange__inputWrapper" style={inputWrapperStyle}>
-          <input
-            type="range"
-            id={id}
+        {showValue && (
+          <EuiRangeTooltip
+            value={value}
+            max={max}
+            min={min}
             name={name}
-            className={classes}
+          />
+        )}
+
+        {showRange && (
+          <EuiRangeHighlight
             min={min}
             max={max}
-            step={step}
-            value={value}
-            disabled={disabled}
-            onChange={onChange}
-            style={style}
-            tabIndex={sliderTabIndex}
-            {...rest}
+            lowerValue={min}
+            upperValue={value}
           />
-
-          {this.renderValue()}
-          {this.renderRange()}
-          {this.renderLevels()}
-          {this.renderTicks(tickObject)}
-        </div>
-
-        {this.renderLabel('max')}
-        {extraInputNode}
-      </div>
-    );
-  }
-
-  renderLabel = (side) => {
-    const {
-      showLabels,
-    } = this.props;
-
-    if (!showLabels) { return; }
-
-    return (
-      <label className={`euiRange__${side}Label`}>
-        {this.props[side]}
-      </label>
-    );
-
-  }
-
-  renderTicks = (tickObject) => {
-    const {
-      disabled,
-      onChange,
-      showTicks,
-      ticks,
-      value,
-      max,
-    } = this.props;
-
-    if (!showTicks) {
-      return;
-    }
-
-    // Align with item labels across the range by adding
-    // left and right negative margins that is half of the tick marks
-    const ticksStyle = !!ticks ? undefined : { margin: `0 ${tickObject.percentageWidth / -2}%`, left: 0, right: 0 };
-
-    return (
-      <div className="euiRange__ticks" style={ticksStyle}>
-        {tickObject.sequence.map((tickValue) => {
-          const tickStyle = {};
-          let customTick;
-          if (ticks) {
-            customTick = find(ticks, function (o) { return o.value === tickValue; });
-
-            if (customTick == null) {
-              return;
-            } else {
-              tickStyle.left = `${(customTick.value / max) * 100}%`;
-            }
-          } else {
-            tickStyle.width = `${tickObject.percentageWidth}%`;
-          }
-
-          const tickClasses = classNames(
-            'euiRange__tick',
-            {
-              'euiRange__tick--selected': value === tickValue,
-              'euiRange__tick-isCustom': customTick,
-            }
-          );
-
-          return (
-            <button
-              type="button"
-              className={tickClasses}
-              key={tickValue}
-              value={tickValue}
-              disabled={disabled}
-              onClick={onChange}
-              style={tickStyle}
-              // Don't allow tabbing and just let the range to do the work for non-sighted users
-              tabIndex="-1"
-            >
-              {customTick ? customTick.label : tickValue}
-            </button>
-          );
-        })}
-      </div>
-    );
-  }
-
-  renderRange = () => {
-    const {
-      showRange,
-      value,
-      max,
-      min,
-    } = this.props;
-
-    if (!showRange) {
-      return;
-    }
-
-    // Calculate the width the range based on value
-    const rangeWidth = (value - min) / (max - min);
-    const rangeWidthStyle = { width: `${rangeWidth * 100}%` };
-
-    return (
-      <div className="euiRange__range">
-        <div className="euiRange__range__progress" style={rangeWidthStyle} />
-      </div>
-    );
-  }
-
-  renderValue = () => {
-    const {
-      showValue,
-      value,
-      valueAppend,
-      max,
-      min,
-      name,
-    } = this.props;
-
-    if (!showValue) {
-      return;
-    }
-
-    // Calculate the left position based on value
-    const decimal = (value - min) / (max - min);
-    // Must be between 0-100%
-    let valuePosition = decimal <= 1 ? decimal : 1;
-    valuePosition = valuePosition >= 0 ? valuePosition : 0;
-
-    let valuePositionSide;
-    if (valuePosition > .5) {
-      valuePositionSide = 'left';
-    } else {
-      valuePositionSide = 'right';
-    }
-
-    const valuePositionStyle = { left: `${valuePosition * 100}%` };
-
-    // Change left/right position based on value (half way point)
-    const valueClasses = classNames(
-      'euiRange__value',
-      `euiRange__value--${valuePositionSide}`,
-    );
-
-    return (
-      <div className="euiRange__valueWrapper">
-        <output className={valueClasses} htmlFor={name} style={valuePositionStyle}>
-          {value}{valueAppend}
-        </output>
-      </div>
-    );
-  }
-
-  renderLevels = () => {
-    const {
-      levels,
-      max,
-      min,
-    } = this.props;
-
-    if (levels.length < 1) {
-      return;
-    }
-
-    return (
-      <div className="euiRange__levels">
-        {levels.map((level, index) => {
-          const range = level.max - level.min;
-          const width = (range / (max - min)) * 100;
-
-          return (
-            <span key={index} style={{ width: `${width}%` }} className={`euiRange__level--${level.color}`} />
-          );
-        })}
-      </div>
-    );
-  }
-}
-
-function calculateTicksObject(min, max, interval) {
-  // Calculate the width of each tick mark
-  const tickWidthDecimal = (interval / ((max - min) + interval));
-  const tickWidthPercentage = tickWidthDecimal * 100;
-
-  // Loop from min to max, creating ticks at each interval
-  // (adds a very small number to the max since `range` is not inclusive of the max value)
-  const toBeInclusive = .000000001;
-  const sequence = range(min, max + toBeInclusive, interval);
-
-  return (
-    {
-      decimalWidth: tickWidthDecimal,
-      percentageWidth: tickWidthPercentage,
-      sequence: sequence,
-    }
+        )}
+      </EuiRangeTrack>
+      {showLabels && <EuiRangeLabel side="max">{props.max}</EuiRangeLabel>}
+      {showInput && (
+        <EuiRangeInput
+          min={min}
+          max={max}
+          step={step}
+          value={value}
+          disabled={disabled}
+          compressed={compressed}
+          onChange={onChange}
+          name={name}
+        />
+      )}
+    </EuiRangeWrapper>
   );
-}
+};
 
 EuiRange.propTypes = {
   name: PropTypes.string,
diff --git a/src/components/form/range/range_highlight.js b/src/components/form/range/range_highlight.js
new file mode 100644
index 00000000000..9d40af68d7b
--- /dev/null
+++ b/src/components/form/range/range_highlight.js
@@ -0,0 +1,26 @@
+import React from 'react';
+// import PropTypes from 'prop-types';
+
+export const EuiRangeHighlight = props => {
+  const {
+    lowerValue,
+    upperValue,
+    max,
+    min,
+  } = props;
+
+  // Calculate the width the range based on value
+  // const rangeWidth = (value - min) / (max - min);
+  const leftPosition = (lowerValue - min) / (max - min);
+  const rangeWidth = (upperValue - lowerValue) / (max - min);
+  const rangeWidthStyle = {
+    marginLeft: `${leftPosition * 100}%`,
+    width: `${rangeWidth * 100}%`
+  };
+
+  return (
+    <div className="euiRange__range">
+      <div className="euiRange__range__progress" style={rangeWidthStyle} />
+    </div>
+  );
+};
diff --git a/src/components/form/range/range_input.js b/src/components/form/range/range_input.js
new file mode 100644
index 00000000000..3bc8b879e9e
--- /dev/null
+++ b/src/components/form/range/range_input.js
@@ -0,0 +1,36 @@
+import React from 'react';
+// import PropTypes from 'prop-types';
+
+import { EuiFieldNumber } from '../field_number';
+
+export const EuiRangeInput = props => {
+  const {
+    min,
+    max,
+    step,
+    value,
+    disabled,
+    compressed,
+    onChange,
+    name,
+    ...rest
+  } = props;
+
+  const maxWidthStyle = { maxWidth: `${Math.max(String(min).length, String(max).length) + 2}em` };
+
+  return (
+    <EuiFieldNumber
+      name={name}
+      className="euiRange__extraInput"
+      min={Number(min)}
+      max={Number(max)}
+      step={step}
+      value={Number(value)}
+      disabled={disabled}
+      compressed={compressed}
+      onChange={onChange}
+      style={maxWidthStyle}
+      {...rest}
+    />
+  );
+};
diff --git a/src/components/form/range/range_label.js b/src/components/form/range/range_label.js
new file mode 100644
index 00000000000..71255b32701
--- /dev/null
+++ b/src/components/form/range/range_label.js
@@ -0,0 +1,8 @@
+import React from 'react';
+// import PropTypes from 'prop-types';
+
+export const EuiRangeLabel = ({ children, side }) => (
+  <label className={`euiRange__${side}Label`}>
+    {children}
+  </label>
+);
diff --git a/src/components/form/range/range_slider.js b/src/components/form/range/range_slider.js
new file mode 100644
index 00000000000..944ec732842
--- /dev/null
+++ b/src/components/form/range/range_slider.js
@@ -0,0 +1,34 @@
+import React from 'react';
+
+export const EuiRangeSlider = (
+  {
+    className,
+    disabled,
+    id,
+    max,
+    min,
+    name,
+    step,
+    onChange,
+    tabIndex,
+    value,
+    style,
+    ...rest
+  }
+) => (
+  <input
+    type="range"
+    id={id}
+    name={name}
+    className={className}
+    min={min}
+    max={max}
+    step={step}
+    value={value}
+    disabled={disabled}
+    onChange={onChange}
+    style={style}
+    tabIndex={tabIndex}
+    {...rest}
+  />
+);
diff --git a/src/components/form/range/range_tooltip.js b/src/components/form/range/range_tooltip.js
new file mode 100644
index 00000000000..4f358baaf02
--- /dev/null
+++ b/src/components/form/range/range_tooltip.js
@@ -0,0 +1,42 @@
+import React from 'react';
+// import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+export const EuiRangeTooltip = props => {
+  const {
+    value,
+    valueAppend,
+    max,
+    min,
+    name,
+  } = props;
+
+  // Calculate the left position based on value
+  const decimal = (value - min) / (max - min);
+  // Must be between 0-100%
+  let valuePosition = decimal <= 1 ? decimal : 1;
+  valuePosition = valuePosition >= 0 ? valuePosition : 0;
+
+  let valuePositionSide;
+  if (valuePosition > .5) {
+    valuePositionSide = 'left';
+  } else {
+    valuePositionSide = 'right';
+  }
+
+  const valuePositionStyle = { left: `${valuePosition * 100}%` };
+
+  // Change left/right position based on value (half way point)
+  const valueClasses = classNames(
+    'euiRange__value',
+    `euiRange__value--${valuePositionSide}`,
+  );
+
+  return (
+    <div className="euiRange__valueWrapper">
+      <output className={valueClasses} htmlFor={name} style={valuePositionStyle}>
+        {value}{valueAppend}
+      </output>
+    </div>
+  );
+};
diff --git a/src/components/form/range/range_track.js b/src/components/form/range/range_track.js
new file mode 100644
index 00000000000..7dbe6461822
--- /dev/null
+++ b/src/components/form/range/range_track.js
@@ -0,0 +1,196 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+import { range, find } from 'lodash';
+
+export const LEVEL_COLORS = ['primary', 'success', 'warning', 'danger'];
+
+export class EuiRangeTrack extends Component {
+
+  calculateTicksObject = (min, max, interval) => {
+    // Calculate the width of each tick mark
+    const tickWidthDecimal = (interval / ((max - min) + interval));
+    const tickWidthPercentage = tickWidthDecimal * 100;
+
+    // Loop from min to max, creating ticks at each interval
+    // (adds a very small number to the max since `range` is not inclusive of the max value)
+    const toBeInclusive = .000000001;
+    const sequence = range(min, max + toBeInclusive, interval);
+
+    return (
+      {
+        decimalWidth: tickWidthDecimal,
+        percentageWidth: tickWidthPercentage,
+        sequence: sequence,
+      }
+    );
+  }
+
+  render() {
+    const {
+      children,
+      disabled,
+      max,
+      min,
+      step,
+      showTicks,
+      tickInterval,
+      ticks, // eslint-disable-line no-unused-vars
+      levels,
+      onChange,
+      value
+    } = this.props;
+
+    let tickObject;
+    const inputWrapperStyle = {};
+    if (showTicks) {
+      tickObject = this.calculateTicksObject(min, max, tickInterval || step || 1);
+
+      // Calculate if any extra margin should be added to the inputWrapper
+      // because of longer tick labels on the ends
+      const lengthOfMinLabel = String(tickObject.sequence[0]).length;
+      const lenghtOfMaxLabel = String(tickObject.sequence[tickObject.sequence.length - 1]).length;
+      const isLastTickTheMax = tickObject.sequence[tickObject.sequence.length - 1] === max;
+      if (lengthOfMinLabel > 2) {
+        inputWrapperStyle.marginLeft = `${(lengthOfMinLabel / 5)}em`;
+      }
+      if (isLastTickTheMax && lenghtOfMaxLabel > 2) {
+        inputWrapperStyle.marginRight = `${(lenghtOfMaxLabel / 5)}em`;
+      }
+    }
+
+    return (
+      <div className="euiRange__inputWrapper" style={inputWrapperStyle}>
+        {children}
+        {!!levels.length && (
+          <EuiRangeLevels
+            levels={levels}
+            max={max}
+            min={min}
+          />
+        )}
+        {showTicks && (
+          <EuiRangeTicks
+            disabled={disabled}
+            onChange={onChange}
+            ticks={ticks}
+            tickObject={tickObject}
+            value={value}
+            max={max}
+          />
+        )}
+      </div>
+    );
+  }
+}
+
+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]))
+  ]),
+  /**
+   * 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,
+    }),
+  ),
+  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),
+    }),
+  ),
+};
+
+EuiRangeTrack.defaultProps = {
+  min: 1,
+  max: 100,
+  showInput: false,
+  showTicks: false,
+  levels: [],
+};
+
+const EuiRangeTicks = ({ disabled, onChange, ticks, tickObject, value, max }) => {
+  // Align with item labels across the range by adding
+  // left and right negative margins that is half of the tick marks
+  const ticksStyle = !!ticks ? undefined : { margin: `0 ${tickObject.percentageWidth / -2}%`, left: 0, right: 0 };
+
+  return (
+    <div className="euiRange__ticks" style={ticksStyle}>
+      {tickObject.sequence.map((tickValue) => {
+        const tickStyle = {};
+        let customTick;
+        if (ticks) {
+          customTick = find(ticks, function (o) { return o.value === tickValue; });
+
+          if (customTick == null) {
+            return;
+          } else {
+            tickStyle.left = `${(customTick.value / max) * 100}%`;
+          }
+        } else {
+          tickStyle.width = `${tickObject.percentageWidth}%`;
+        }
+
+        const tickClasses = classNames(
+          'euiRange__tick',
+          {
+            'euiRange__tick--selected': value === tickValue,
+            'euiRange__tick-isCustom': customTick,
+          }
+        );
+
+        return (
+          <button
+            type="button"
+            className={tickClasses}
+            key={tickValue}
+            value={tickValue}
+            disabled={disabled}
+            onClick={onChange}
+            style={tickStyle}
+
+            tabIndex="-1"
+          >
+            {customTick ? customTick.label : tickValue}
+          </button>
+        );
+      })}
+    </div>
+  );
+};
+
+const EuiRangeLevels = ({ levels, max, min }) => (
+  <div className="euiRange__levels">
+    {levels.map((level, index) => {
+      const range = level.max - level.min;
+      const width = (range / (max - min)) * 100;
+
+      return (
+        <span key={index} style={{ width: `${width}%` }} className={`euiRange__level--${level.color}`} />
+      );
+    })}
+  </div>
+);
diff --git a/src/components/form/range/range_wrapper.js b/src/components/form/range/range_wrapper.js
new file mode 100644
index 00000000000..2f501e8f93d
--- /dev/null
+++ b/src/components/form/range/range_wrapper.js
@@ -0,0 +1,83 @@
+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,
+  compressed,
+  disabled,
+  fullWidth,
+  showLabels,
+  showTicks,
+  levels,
+  showRange,
+  showValue,
+}) => {
+
+  const classes = classNames(
+    'euiRange__wrapper',
+    {
+      'euiRange__wrapper--fullWidth': fullWidth,
+      'euiRange__wrapper--compressed': compressed,
+      'euiRange__wrapper--disabled': disabled,
+      'euiRange__wrapper--hasLabels': showLabels,
+      'euiRange__wrapper--hasLevels': levels.length,
+      'euiRange__wrapper--hasRange': showRange,
+      'euiRange__wrapper--hasTicks': showTicks,
+      'euiRange__wrapper--hasValue': showValue,
+    },
+  );
+
+  return (
+    <div className={classes}>
+      {children}
+    </div>
+  );
+};
+
+EuiRangeWrapper.propTypes = {
+  fullWidth: PropTypes.bool,
+  compressed: PropTypes.bool,
+  /**
+   * Shows static min/max labels on the sides of the range slider
+   */
+  showLabels: PropTypes.bool,
+  /**
+   * Displays an extra input control for direct manipulation
+   */
+  showInput: PropTypes.bool,
+  /**
+   * Shows clickable tick marks and labels at the given interval (`step`/`tickInterval`)
+   */
+  showTicks: PropTypes.bool,
+  /**
+   * 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,
+};
+
+EuiRangeWrapper.defaultProps = {
+  fullWidth: false,
+  compressed: false,
+  showLabels: false,
+  showInput: false,
+  showTicks: false,
+  showValue: false,
+  levels: [],
+};

From b781aeef68321187fb973d53c8758d401b9ccdc0 Mon Sep 17 00:00:00 2001
From: Greg Thompson <thompson.glowe@gmail.com>
Date: Fri, 25 Jan 2019 09:29:52 -0600
Subject: [PATCH 02/27] WIP: dual range docs examples

---
 src-docs/src/views/form_controls/range.js | 59 +++++++++++++++++++++++
 src/components/form/index.js              |  2 +-
 src/components/index.js                   |  1 +
 3 files changed, 61 insertions(+), 1 deletion(-)

diff --git a/src-docs/src/views/form_controls/range.js b/src-docs/src/views/form_controls/range.js
index d071610942a..9a80a1df884 100644
--- a/src-docs/src/views/form_controls/range.js
+++ b/src-docs/src/views/form_controls/range.js
@@ -4,6 +4,7 @@ import React, {
 } from 'react';
 
 import {
+  EuiDualRange,
   EuiRange,
   EuiSpacer,
   EuiFormHelpText,
@@ -30,6 +31,7 @@ export default class extends Component {
 
     this.state = {
       value: '120',
+      values: [120, 180]
     };
   }
 
@@ -39,6 +41,12 @@ export default class extends Component {
     });
   };
 
+  onDualChange = (values) => {
+    this.setState({
+      values: values,
+    });
+  };
+
   render() {
     return (
       <Fragment>
@@ -54,6 +62,17 @@ export default class extends Component {
           name="firstRange"
         />
 
+        <EuiDualRange
+          id={makeId()}
+          min={100}
+          max={200}
+          value={this.state.values}
+          onChange={this.onDualChange}
+          aria-label="Use aria labels when no actual label is in use"
+          showLabels
+          name="dualRange"
+        />
+
         <EuiSpacer size="xl" />
 
         <EuiRange
@@ -81,6 +100,18 @@ export default class extends Component {
           showRange
         />
 
+        <EuiDualRange
+          id={makeId()}
+          min={100}
+          max={200}
+          value={this.state.values}
+          onChange={this.onDualChange}
+          aria-label="Use aria labels when no actual label is in use"
+          showLabels
+          showInput
+          showRange
+        />
+
         <EuiSpacer size="xl" />
 
         <EuiRange
@@ -115,6 +146,19 @@ export default class extends Component {
           tickInterval={300}
         />
 
+        <EuiDualRange
+          id={makeId()}
+          min={0}
+          max={2000}
+          step={50}
+          value={this.state.values}
+          onChange={this.onDualChange}
+          aria-label="Use aria labels when no actual label is in use"
+          showTicks
+          showRange
+          tickInterval={300}
+        />
+
         <EuiSpacer size="xl" />
 
         <EuiRange
@@ -131,6 +175,21 @@ export default class extends Component {
           tickInterval={500}
           levels={this.levels}
         />
+
+        <EuiDualRange
+          id={makeId()}
+          min={0}
+          max={2000}
+          step={50}
+          value={this.state.values}
+          onChange={this.onDualChange}
+          aria-label="Use aria labels when no actual label is in use"
+          aria-describedby="levelsHelp"
+          showTicks
+          showInput
+          tickInterval={500}
+          levels={this.levels}
+        />
       </Fragment>
     );
   }
diff --git a/src/components/form/index.js b/src/components/form/index.js
index a0dca1c8bb8..2dd6490a490 100644
--- a/src/components/form/index.js
+++ b/src/components/form/index.js
@@ -18,7 +18,7 @@ export {
   EuiRadio,
   EuiRadioGroup,
 } from './radio';
-export { EuiRange } from './range';
+export { EuiDualRange, EuiRange } from './range';
 export { EuiSelect } from './select';
 export {
   EuiSuperSelect,
diff --git a/src/components/index.js b/src/components/index.js
index 654bed85b61..9589bd3c55f 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -131,6 +131,7 @@ export {
   EuiCheckbox,
   EuiCheckboxGroup,
   EuiDescribedFormGroup,
+  EuiDualRange,
   EuiFieldNumber,
   EuiFieldPassword,
   EuiFieldSearch,

From b5fabbcbf85afad6229f3f19ce9a39bf28a4d367 Mon Sep 17 00:00:00 2001
From: Greg Thompson <thompson.glowe@gmail.com>
Date: Fri, 25 Jan 2019 15:48:57 -0600
Subject: [PATCH 03/27] WIP: propTypes; type def updates; baseline keyboard nav

---
 src/components/form/range/_range.scss        |   4 +
 src/components/form/range/dual_range.js      | 146 +++++++++++++++----
 src/components/form/range/index.d.ts         |  21 ++-
 src/components/form/range/range.js           |  72 ++++-----
 src/components/form/range/range_highlight.js |  18 +--
 src/components/form/range/range_input.js     |  35 +++--
 src/components/form/range/range_label.js     |   6 +-
 src/components/form/range/range_slider.js    |  49 ++++---
 src/components/form/range/range_tooltip.js   |  20 +--
 src/components/form/range/range_track.js     |  20 ---
 src/components/form/range/range_wrapper.js   |  36 +----
 11 files changed, 254 insertions(+), 173 deletions(-)

diff --git a/src/components/form/range/_range.scss b/src/components/form/range/_range.scss
index 0035f0fbd7a..c4c00c634a5 100644
--- a/src/components/form/range/_range.scss
+++ b/src/components/form/range/_range.scss
@@ -403,6 +403,10 @@ $euiRangeLevelColors: (
 
   pointer-events: none;
 
+  &:focus {
+    @include euiCustomControlFocused;
+  }
+
   &--hasTicks {
     top: 25%;
   }
diff --git a/src/components/form/range/dual_range.js b/src/components/form/range/dual_range.js
index d3be1304867..a69c4192466 100644
--- a/src/components/form/range/dual_range.js
+++ b/src/components/form/range/dual_range.js
@@ -2,21 +2,29 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
+import { keyCodes } from '../../../services';
+
 import { EuiRangeHighlight } from './range_highlight';
 import { EuiRangeInput } from './range_input';
 import { EuiRangeLabel } from './range_label';
 import { EuiRangeSlider } from './range_slider';
-import { EuiRangeTrack } from './range_track';
+import { EuiRangeTrack, LEVEL_COLORS } from './range_track';
 import { EuiRangeWrapper } from './range_wrapper';
 
-export const LEVEL_COLORS = ['primary', 'success', 'warning', 'danger'];
-
 export class EuiDualRange extends Component {
+  rangeSliderRef = React.createRef();
+
+  get lowerValue() {
+    return this.props.value[0];
+  }
+  get upperValue() {
+    return this.props.value[1];
+  }
 
   _determineThumbMovement = (newVal, e) => {
     // Determine closer thumb
-    let lower = this.props.value[0];
-    let upper = this.props.value[1];
+    let lower = this.lowerValue;
+    let upper = this.upperValue;
     if (Math.abs(lower - newVal) <= Math.abs(upper - newVal)) {
       lower = newVal;
     } else {
@@ -34,11 +42,52 @@ export class EuiDualRange extends Component {
   }
 
   handleLowerInputChange = (e) => {
-    this._handleOnChange(e.target.value, this.props.value[1], e);
+    this._handleOnChange(e.target.value, this.upperValue, e);
   }
 
   handleUpperInputChange = (e) => {
-    this._handleOnChange(this.props.value[0], e.target.value, e);
+    this._handleOnChange(this.lowerValue, e.target.value, e);
+  }
+
+  _handleKeyDown = (value, e) => {
+    e.preventDefault();
+    let newVal = value;
+    const change = this.props.step || 1;
+    switch (e.keyCode) {
+      case keyCodes.UP:
+      case keyCodes.RIGHT:
+        newVal += change;
+        break;
+      case keyCodes.DOWN:
+      case keyCodes.LEFT:
+        newVal -= change;
+        break;
+    }
+    return newVal;
+  }
+
+  handleLowerKeyDown = (e) => {
+    let lower = this.lowerValue;
+    switch (e.keyCode) {
+      case keyCodes.TAB:
+        return;
+      default:
+        lower = this._handleKeyDown(lower, e);
+    }
+    if (lower >= this.upperValue || lower < this.props.min) return;
+    this._handleOnChange(lower, this.upperValue, e);
+  }
+
+  handleUpperKeyDown = (e) => {
+    let upper = this.upperValue;
+    switch (e.keyCode) {
+      case keyCodes.TAB:
+        return;
+      default:
+        upper = this._handleKeyDown(upper, e);
+    }
+    if (upper <= this.lowerValue || upper > this.props.max) return;
+    this._handleOnChange(this.lowerValue, upper,  e);
   }
 
   calculateThumbPositionStyle = (value) => {
@@ -48,8 +97,10 @@ export class EuiDualRange extends Component {
     let valuePosition = decimal <= 1 ? decimal : 1;
     valuePosition = valuePosition >= 0 ? valuePosition : 0;
 
-    //TODO: left should be 100% - (ratio of thumb width to track width)
-    return { left: `${valuePosition * 95.5}%` };
+    // TODO: Get ref earlier
+    const thumbToTrackRatio = this.rangeSliderRef.current ? (16 / this.rangeSliderRef.current.offsetWidth) : 0.05;
+    const trackPositionScale = (1 - thumbToTrackRatio) * 100;
+    return { left: `${valuePosition * trackPositionScale}%` };
   }
 
   render() {
@@ -70,6 +121,7 @@ export class EuiDualRange extends Component {
       tickInterval,
       ticks, // eslint-disable-line no-unused-vars
       levels,
+      onChange, // eslint-disable-line no-unused-vars
       showRange,
       valueAppend, // eslint-disable-line no-unused-vars
       value,
@@ -77,14 +129,7 @@ export class EuiDualRange extends Component {
       ...rest
     } = this.props;
 
-    const thumbClasses = classNames(
-      'euiRange__thumb',
-      {
-        'euiRange__thumb--hasTicks': showTicks
-      },
-    );
-    const lowerThumbStyle = this.calculateThumbPositionStyle(value[0]);
-    const upperThumbStyle = this.calculateThumbPositionStyle(value[1]);
+    const rangeClasses = classNames('euiRange', 'euiRange--dual', className);
 
     return (
       <EuiRangeWrapper
@@ -99,16 +144,16 @@ export class EuiDualRange extends Component {
         {showInput && (
           <EuiRangeInput
             min={min}
-            max={value[1]}
+            max={Number(this.upperValue)}
             step={step}
-            value={value[0]}
+            value={this.lowerValue}
             disabled={disabled}
             compressed={compressed}
             onChange={this.handleLowerInputChange}
             name={name}
           />
         )}
-        {showLabels && <EuiRangeLabel side="min">{this.props.min}</EuiRangeLabel>}
+        {showLabels && <EuiRangeLabel side="min">{min}</EuiRangeLabel>}
         <EuiRangeTrack
           disabled={disabled}
           max={max}
@@ -122,9 +167,10 @@ export class EuiDualRange extends Component {
           value={value}
         >
           <EuiRangeSlider
+            ref={this.rangeSliderRef}
             id={id}
             name={name}
-            className={`euiRange euiRange--dual ${className}`}
+            className={rangeClasses}
             min={min}
             max={max}
             step={step}
@@ -136,25 +182,43 @@ export class EuiDualRange extends Component {
             {...rest}
           />
 
-          <div className={thumbClasses} style={lowerThumbStyle} />
-          <div className={thumbClasses} style={upperThumbStyle} />
+          <EuiRangeThumb
+            min={min}
+            max={Number(this.upperValue)}
+            value={this.lowerValue}
+            disabled={disabled}
+            showTicks={showTicks}
+            showInput={showInput}
+            onKeyDown={this.handleLowerKeyDown}
+            style={this.calculateThumbPositionStyle(this.lowerValue)}
+          />
+          <EuiRangeThumb
+            min={Number(this.lowerValue)}
+            max={max}
+            value={this.upperValue}
+            disabled={disabled}
+            showTicks={showTicks}
+            showInput={showInput}
+            onKeyDown={this.handleUpperKeyDown}
+            style={this.calculateThumbPositionStyle(this.upperValue)}
+          />
 
           {showRange && (
             <EuiRangeHighlight
-              min={min}
-              max={max}
-              lowerValue={value[0]}
-              upperValue={value[1]}
+              min={Number(min)}
+              max={Number(max)}
+              lowerValue={Number(this.lowerValue)}
+              upperValue={Number(this.upperValue)}
             />
           )}
         </EuiRangeTrack>
-        {showLabels && <EuiRangeLabel side="max">{this.props.max}</EuiRangeLabel>}
+        {showLabels && <EuiRangeLabel side="max">{max}</EuiRangeLabel>}
         {showInput && (
           <EuiRangeInput
-            min={value[0]}
+            min={Number(this.lowerValue)}
             max={max}
             step={step}
-            value={value[1]}
+            value={this.upperValue}
             disabled={disabled}
             compressed={compressed}
             onChange={this.handleUpperInputChange}
@@ -231,3 +295,25 @@ EuiDualRange.defaultProps = {
   showTicks: false,
   levels: [],
 };
+
+const EuiRangeThumb = ({ min, max, value, disabled, onKeyDown, showInput, showTicks, style }) => {
+  const classes = classNames(
+    'euiRange__thumb',
+    {
+      'euiRange__thumb--hasTicks': showTicks
+    },
+  );
+  return (
+    <div
+      className={classes}
+      style={style}
+      role="slider"
+      aria-valuemin={min}
+      aria-valuemax={max}
+      aria-valuenow={value}
+      aria-disabled={!!disabled}
+      tabIndex={showInput ? '-1' : '0'}
+      onKeyDown={onKeyDown}
+    />
+  );
+};
diff --git a/src/components/form/range/index.d.ts b/src/components/form/range/index.d.ts
index 6b15cbf3bd8..4696c47dc89 100644
--- a/src/components/form/range/index.d.ts
+++ b/src/components/form/range/index.d.ts
@@ -3,12 +3,14 @@ import { CommonProps } from '../../common';
 import { SFC, ReactNode, HTMLAttributes, ChangeEventHandler, InputHTMLAttributes } from 'react';
 
 declare module '@elastic/eui' {
+  export type EuiRangeLevelColor = 'primary' | 'success' | 'warning' | 'danger';
+
   /**
+   * single range type def
+   *
    * @see './range.js'
    */
 
-  export type EuiRangeLevelColor = 'primary' | 'success' | 'warning' | 'danger';
-
   export interface EuiRangeProps {
     compressed?: boolean;
     fullWidth?: boolean;
@@ -32,4 +34,19 @@ declare module '@elastic/eui' {
   export const EuiRange: SFC<
     CommonProps & InputHTMLAttributes<HTMLInputElement> & EuiRangeProps
   >;
+
+  /**
+   * dual range type defs
+   *
+   * @see './dual_range.js'
+   */
+
+    export interface EuiDualRangeProps {
+      // Override acceptable value type
+      value: Array<number | string>
+    }
+
+    export const EuiDualRange: SFC<
+      CommonProps & InputHTMLAttributes<HTMLInputElement> & EuiRangeProps & EuiDualRangeProps
+    >;
 }
diff --git a/src/components/form/range/range.js b/src/components/form/range/range.js
index c0b7aba68ef..6f0e8a989e7 100644
--- a/src/components/form/range/range.js
+++ b/src/components/form/range/range.js
@@ -1,42 +1,42 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import classNames from 'classnames';
 
 import { EuiRangeHighlight } from './range_highlight';
 import { EuiRangeInput } from './range_input';
 import { EuiRangeLabel } from './range_label';
 import { EuiRangeSlider } from './range_slider';
 import { EuiRangeTooltip } from './range_tooltip';
-import { EuiRangeTrack } from './range_track';
+import { EuiRangeTrack, LEVEL_COLORS } from './range_track';
 import { EuiRangeWrapper } from './range_wrapper';
 
-export const LEVEL_COLORS = ['primary', 'success', 'warning', 'danger'];
+export const EuiRange = ({
+  className,
+  compressed,
+  disabled,
+  fullWidth,
+  id,
+  max,
+  min,
+  name,
+  step,
+  showLabels,
+  showInput,
+  showTicks,
+  tickInterval,
+  ticks, // eslint-disable-line no-unused-vars
+  levels,
+  showRange,
+  showValue,
+  valueAppend, // eslint-disable-line no-unused-vars
+  onChange,
+  value,
+  style,
+  tabIndex,
+  ...rest
+}) => {
 
-export const EuiRange = props => {
-
-  const {
-    className,
-    compressed,
-    disabled,
-    fullWidth,
-    id,
-    max,
-    min,
-    name,
-    step,
-    showLabels,
-    showInput,
-    showTicks,
-    tickInterval,
-    ticks, // eslint-disable-line no-unused-vars
-    levels,
-    showRange,
-    showValue,
-    valueAppend, // eslint-disable-line no-unused-vars
-    onChange,
-    value,
-    style,
-    ...rest
-  } = props;
+  const classes = classNames('euiRange', className);
 
   return (
     <EuiRangeWrapper
@@ -49,7 +49,7 @@ export const EuiRange = props => {
       showRange={showRange}
       showValue={showValue}
     >
-      {showLabels && <EuiRangeLabel side="min">{props.min}</EuiRangeLabel>}
+      {showLabels && <EuiRangeLabel side="min">{min}</EuiRangeLabel>}
       <EuiRangeTrack
         disabled={disabled}
         max={max}
@@ -65,7 +65,7 @@ export const EuiRange = props => {
         <EuiRangeSlider
           id={id}
           name={name}
-          className={`euiRange ${className}`}
+          className={classes}
           min={min}
           max={max}
           step={step}
@@ -73,7 +73,7 @@ export const EuiRange = props => {
           disabled={disabled}
           onChange={onChange}
           style={style}
-          tabIndex={showInput ? '-1' : '0'}
+          tabIndex={showInput ? '-1' : (tabIndex || null)}
           {...rest}
         />
 
@@ -88,14 +88,14 @@ export const EuiRange = props => {
 
         {showRange && (
           <EuiRangeHighlight
-            min={min}
-            max={max}
-            lowerValue={min}
-            upperValue={value}
+            min={Number(min)}
+            max={Number(max)}
+            lowerValue={Number(min)}
+            upperValue={Number(value)}
           />
         )}
       </EuiRangeTrack>
-      {showLabels && <EuiRangeLabel side="max">{props.max}</EuiRangeLabel>}
+      {showLabels && <EuiRangeLabel side="max">{max}</EuiRangeLabel>}
       {showInput && (
         <EuiRangeInput
           min={min}
diff --git a/src/components/form/range/range_highlight.js b/src/components/form/range/range_highlight.js
index 9d40af68d7b..ab1eed8cde4 100644
--- a/src/components/form/range/range_highlight.js
+++ b/src/components/form/range/range_highlight.js
@@ -1,14 +1,7 @@
 import React from 'react';
-// import PropTypes from 'prop-types';
-
-export const EuiRangeHighlight = props => {
-  const {
-    lowerValue,
-    upperValue,
-    max,
-    min,
-  } = props;
+import PropTypes from 'prop-types';
 
+export const EuiRangeHighlight = ({ lowerValue, upperValue, max, min }) => {
   // Calculate the width the range based on value
   // const rangeWidth = (value - min) / (max - min);
   const leftPosition = (lowerValue - min) / (max - min);
@@ -24,3 +17,10 @@ export const EuiRangeHighlight = props => {
     </div>
   );
 };
+
+EuiRangeHighlight.propTypes = {
+  lowerValue: PropTypes.number.isRequired,
+  upperValue: PropTypes.number.isRequired,
+  max: PropTypes.number.isRequired,
+  min: PropTypes.number.isRequired
+};
diff --git a/src/components/form/range/range_input.js b/src/components/form/range/range_input.js
index 3bc8b879e9e..353ad6fed4c 100644
--- a/src/components/form/range/range_input.js
+++ b/src/components/form/range/range_input.js
@@ -1,20 +1,19 @@
 import React from 'react';
-// import PropTypes from 'prop-types';
+import PropTypes from 'prop-types';
 
 import { EuiFieldNumber } from '../field_number';
 
-export const EuiRangeInput = props => {
-  const {
-    min,
-    max,
-    step,
-    value,
-    disabled,
-    compressed,
-    onChange,
-    name,
-    ...rest
-  } = props;
+export const EuiRangeInput = ({
+  min,
+  max,
+  step,
+  value,
+  disabled,
+  compressed,
+  onChange,
+  name,
+  ...rest
+}) => {
 
   const maxWidthStyle = { maxWidth: `${Math.max(String(min).length, String(max).length) + 2}em` };
 
@@ -34,3 +33,13 @@ export const EuiRangeInput = props => {
     />
   );
 };
+
+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
+};
diff --git a/src/components/form/range/range_label.js b/src/components/form/range/range_label.js
index 71255b32701..f32ce11eb0b 100644
--- a/src/components/form/range/range_label.js
+++ b/src/components/form/range/range_label.js
@@ -1,8 +1,12 @@
 import React from 'react';
-// import PropTypes from 'prop-types';
+import PropTypes from 'prop-types';
 
 export const EuiRangeLabel = ({ children, side }) => (
   <label className={`euiRange__${side}Label`}>
     {children}
   </label>
 );
+
+EuiRangeLabel.propTypes = {
+  side: PropTypes.string.isRequired
+};
diff --git a/src/components/form/range/range_slider.js b/src/components/form/range/range_slider.js
index 944ec732842..1203c04fa6e 100644
--- a/src/components/form/range/range_slider.js
+++ b/src/components/form/range/range_slider.js
@@ -1,22 +1,22 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 
-export const EuiRangeSlider = (
-  {
-    className,
-    disabled,
-    id,
-    max,
-    min,
-    name,
-    step,
-    onChange,
-    tabIndex,
-    value,
-    style,
-    ...rest
-  }
-) => (
+export const EuiRangeSlider = React.forwardRef(({
+  className,
+  disabled,
+  id,
+  max,
+  min,
+  name,
+  step,
+  onChange,
+  tabIndex,
+  value,
+  style,
+  ...rest
+}, ref) => (
   <input
+    ref={ref}
     type="range"
     id={id}
     name={name}
@@ -31,4 +31,19 @@ export const EuiRangeSlider = (
     tabIndex={tabIndex}
     {...rest}
   />
-);
+));
+
+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]))
+  ]),
+};
diff --git a/src/components/form/range/range_tooltip.js b/src/components/form/range/range_tooltip.js
index 4f358baaf02..4ab13cbc1fa 100644
--- a/src/components/form/range/range_tooltip.js
+++ b/src/components/form/range/range_tooltip.js
@@ -1,16 +1,8 @@
 import React from 'react';
-// import PropTypes from 'prop-types';
+import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
-export const EuiRangeTooltip = props => {
-  const {
-    value,
-    valueAppend,
-    max,
-    min,
-    name,
-  } = props;
-
+export const EuiRangeTooltip = ({ value, valueAppend, max, min, name }) => {
   // Calculate the left position based on value
   const decimal = (value - min) / (max - min);
   // Must be between 0-100%
@@ -40,3 +32,11 @@ export const EuiRangeTooltip = props => {
     </div>
   );
 };
+
+EuiRangeTooltip.propTypes = {
+  value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+  valueAppend: PropTypes.string,
+  max: PropTypes.number.isRequired,
+  min: PropTypes.number.isRequired,
+  name: PropTypes.string
+};
diff --git a/src/components/form/range/range_track.js b/src/components/form/range/range_track.js
index 7dbe6461822..2a2719b6ea1 100644
--- a/src/components/form/range/range_track.js
+++ b/src/components/form/range/range_track.js
@@ -94,17 +94,8 @@ EuiRangeTrack.propTypes = {
     PropTypes.string,
     PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string]))
   ]),
-  /**
-   * 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,
@@ -112,9 +103,6 @@ EuiRangeTrack.propTypes = {
     }),
   ),
   onChange: PropTypes.func,
-  /**
-   * Create colored indicators for certain intervals
-   */
   levels: PropTypes.arrayOf(
     PropTypes.shape({
       min: PropTypes.number,
@@ -124,14 +112,6 @@ EuiRangeTrack.propTypes = {
   ),
 };
 
-EuiRangeTrack.defaultProps = {
-  min: 1,
-  max: 100,
-  showInput: false,
-  showTicks: false,
-  levels: [],
-};
-
 const EuiRangeTicks = ({ disabled, onChange, ticks, tickObject, value, max }) => {
   // Align with item labels across the range by adding
   // left and right negative margins that is half of the tick marks
diff --git a/src/components/form/range/range_wrapper.js b/src/components/form/range/range_wrapper.js
index 2f501e8f93d..29157b1dab9 100644
--- a/src/components/form/range/range_wrapper.js
+++ b/src/components/form/range/range_wrapper.js
@@ -40,44 +40,10 @@ export const EuiRangeWrapper = ({
 EuiRangeWrapper.propTypes = {
   fullWidth: PropTypes.bool,
   compressed: PropTypes.bool,
-  /**
-   * Shows static min/max labels on the sides of the range slider
-   */
   showLabels: PropTypes.bool,
-  /**
-   * Displays an extra input control for direct manipulation
-   */
   showInput: PropTypes.bool,
-  /**
-   * Shows clickable tick marks and labels at the given interval (`step`/`tickInterval`)
-   */
   showTicks: PropTypes.bool,
-  /**
-   * 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
-   */
+  levels: PropTypes.array,
   showRange: PropTypes.bool,
-  /**
-   * Shows a tooltip styled value
-   */
   showValue: PropTypes.bool,
 };
-
-EuiRangeWrapper.defaultProps = {
-  fullWidth: false,
-  compressed: false,
-  showLabels: false,
-  showInput: false,
-  showTicks: false,
-  showValue: false,
-  levels: [],
-};

From 9cbe7938066940977d3de92cb6b0f951b8900bca Mon Sep 17 00:00:00 2001
From: Greg Thompson <thompson.glowe@gmail.com>
Date: Fri, 25 Jan 2019 16:04:40 -0600
Subject: [PATCH 04/27] WIP: hasFocus for range highlight

---
 src/components/form/range/_range.scss        |  4 ++++
 src/components/form/range/dual_range.js      | 20 +++++++++++++++++---
 src/components/form/range/range_highlight.js | 10 ++++++++--
 3 files changed, 29 insertions(+), 5 deletions(-)

diff --git a/src/components/form/range/_range.scss b/src/components/form/range/_range.scss
index c4c00c634a5..9cee9ff7ab5 100644
--- a/src/components/form/range/_range.scss
+++ b/src/components/form/range/_range.scss
@@ -124,6 +124,10 @@ $euiRangeLevelColors: (
   height: 4px;
   border-radius: 4px;
   background-color: $euiRangeTrackColor;
+
+  &--hasFocus {
+    background-color: $euiColorPrimary;
+  }
 }
 
 .euiRange__value {
diff --git a/src/components/form/range/dual_range.js b/src/components/form/range/dual_range.js
index a69c4192466..77b28d53440 100644
--- a/src/components/form/range/dual_range.js
+++ b/src/components/form/range/dual_range.js
@@ -12,6 +12,10 @@ import { EuiRangeTrack, LEVEL_COLORS } from './range_track';
 import { EuiRangeWrapper } from './range_wrapper';
 
 export class EuiDualRange extends Component {
+  state = {
+    hasFocus: false
+  }
+
   rangeSliderRef = React.createRef();
 
   get lowerValue() {
@@ -103,6 +107,12 @@ export class EuiDualRange extends Component {
     return { left: `${valuePosition * trackPositionScale}%` };
   }
 
+  toggleHasFocus = (shouldFocused = !this.state.hasFocus) => {
+    this.setState({
+      hasFocus: shouldFocused
+    });
+  }
+
   render() {
 
     const {
@@ -190,6 +200,8 @@ export class EuiDualRange extends Component {
             showTicks={showTicks}
             showInput={showInput}
             onKeyDown={this.handleLowerKeyDown}
+            onFocus={() => this.toggleHasFocus(true)}
+            onBlur={() => this.toggleHasFocus(false)}
             style={this.calculateThumbPositionStyle(this.lowerValue)}
           />
           <EuiRangeThumb
@@ -200,11 +212,14 @@ export class EuiDualRange extends Component {
             showTicks={showTicks}
             showInput={showInput}
             onKeyDown={this.handleUpperKeyDown}
+            onFocus={() => this.toggleHasFocus(true)}
+            onBlur={() => this.toggleHasFocus(false)}
             style={this.calculateThumbPositionStyle(this.upperValue)}
           />
 
           {showRange && (
             <EuiRangeHighlight
+              hasFocus={this.state.hasFocus}
               min={Number(min)}
               max={Number(max)}
               lowerValue={Number(this.lowerValue)}
@@ -296,7 +311,7 @@ EuiDualRange.defaultProps = {
   levels: [],
 };
 
-const EuiRangeThumb = ({ min, max, value, disabled, onKeyDown, showInput, showTicks, style }) => {
+const EuiRangeThumb = ({ min, max, value, disabled, showInput, showTicks, ...rest }) => {
   const classes = classNames(
     'euiRange__thumb',
     {
@@ -306,14 +321,13 @@ const EuiRangeThumb = ({ min, max, value, disabled, onKeyDown, showInput, showTi
   return (
     <div
       className={classes}
-      style={style}
       role="slider"
       aria-valuemin={min}
       aria-valuemax={max}
       aria-valuenow={value}
       aria-disabled={!!disabled}
       tabIndex={showInput ? '-1' : '0'}
-      onKeyDown={onKeyDown}
+      {...rest}
     />
   );
 };
diff --git a/src/components/form/range/range_highlight.js b/src/components/form/range/range_highlight.js
index ab1eed8cde4..320dfa2483f 100644
--- a/src/components/form/range/range_highlight.js
+++ b/src/components/form/range/range_highlight.js
@@ -1,7 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import classNames from 'classnames';
 
-export const EuiRangeHighlight = ({ lowerValue, upperValue, max, min }) => {
+export const EuiRangeHighlight = ({ hasFocus, lowerValue, upperValue, max, min }) => {
   // Calculate the width the range based on value
   // const rangeWidth = (value - min) / (max - min);
   const leftPosition = (lowerValue - min) / (max - min);
@@ -11,14 +12,19 @@ export const EuiRangeHighlight = ({ lowerValue, upperValue, max, min }) => {
     width: `${rangeWidth * 100}%`
   };
 
+  const classes = classNames('euiRange__range__progress', {
+    'euiRange__range__progress--hasFocus': hasFocus
+  });
+
   return (
     <div className="euiRange__range">
-      <div className="euiRange__range__progress" style={rangeWidthStyle} />
+      <div className={classes} style={rangeWidthStyle} />
     </div>
   );
 };
 
 EuiRangeHighlight.propTypes = {
+  hasFocus: PropTypes.bool,
   lowerValue: PropTypes.number.isRequired,
   upperValue: PropTypes.number.isRequired,
   max: PropTypes.number.isRequired,

From 6b6acbd42759de5486571c685c100248b46c28d0 Mon Sep 17 00:00:00 2001
From: Greg Thompson <thompson.glowe@gmail.com>
Date: Fri, 25 Jan 2019 16:30:04 -0600
Subject: [PATCH 05/27] WIP: better rangeSlider ref access

---
 src/components/form/range/dual_range.js | 69 ++++++++++++++-----------
 1 file changed, 40 insertions(+), 29 deletions(-)

diff --git a/src/components/form/range/dual_range.js b/src/components/form/range/dual_range.js
index 77b28d53440..88190fb15d1 100644
--- a/src/components/form/range/dual_range.js
+++ b/src/components/form/range/dual_range.js
@@ -13,10 +13,17 @@ import { EuiRangeWrapper } from './range_wrapper';
 
 export class EuiDualRange extends Component {
   state = {
-    hasFocus: false
+    hasFocus: false,
+    rangeSliderRefAvailable: false
   }
 
-  rangeSliderRef = React.createRef();
+  rangeSliderRef = null;
+  handleRangeSliderRefUpdate = (ref) => {
+    this.rangeSliderRef = ref;
+    this.setState({
+      rangeSliderRefAvailable: true
+    });
+  }
 
   get lowerValue() {
     return this.props.value[0];
@@ -101,8 +108,8 @@ export class EuiDualRange extends Component {
     let valuePosition = decimal <= 1 ? decimal : 1;
     valuePosition = valuePosition >= 0 ? valuePosition : 0;
 
-    // TODO: Get ref earlier
-    const thumbToTrackRatio = this.rangeSliderRef.current ? (16 / this.rangeSliderRef.current.offsetWidth) : 0.05;
+    const EUI_THUMB_SIZE = 16;
+    const thumbToTrackRatio = (EUI_THUMB_SIZE / this.rangeSliderRef.clientWidth);
     const trackPositionScale = (1 - thumbToTrackRatio) * 100;
     return { left: `${valuePosition * trackPositionScale}%` };
   }
@@ -177,7 +184,7 @@ export class EuiDualRange extends Component {
           value={value}
         >
           <EuiRangeSlider
-            ref={this.rangeSliderRef}
+            ref={this.handleRangeSliderRefUpdate}
             id={id}
             name={name}
             className={rangeClasses}
@@ -192,30 +199,34 @@ export class EuiDualRange extends Component {
             {...rest}
           />
 
-          <EuiRangeThumb
-            min={min}
-            max={Number(this.upperValue)}
-            value={this.lowerValue}
-            disabled={disabled}
-            showTicks={showTicks}
-            showInput={showInput}
-            onKeyDown={this.handleLowerKeyDown}
-            onFocus={() => this.toggleHasFocus(true)}
-            onBlur={() => this.toggleHasFocus(false)}
-            style={this.calculateThumbPositionStyle(this.lowerValue)}
-          />
-          <EuiRangeThumb
-            min={Number(this.lowerValue)}
-            max={max}
-            value={this.upperValue}
-            disabled={disabled}
-            showTicks={showTicks}
-            showInput={showInput}
-            onKeyDown={this.handleUpperKeyDown}
-            onFocus={() => this.toggleHasFocus(true)}
-            onBlur={() => this.toggleHasFocus(false)}
-            style={this.calculateThumbPositionStyle(this.upperValue)}
-          />
+          {this.state.rangeSliderRefAvailable && (
+            <React.Fragment>
+              <EuiRangeThumb
+                min={min}
+                max={Number(this.upperValue)}
+                value={this.lowerValue}
+                disabled={disabled}
+                showTicks={showTicks}
+                showInput={showInput}
+                onKeyDown={this.handleLowerKeyDown}
+                onFocus={() => this.toggleHasFocus(true)}
+                onBlur={() => this.toggleHasFocus(false)}
+                style={this.calculateThumbPositionStyle(this.lowerValue)}
+              />
+              <EuiRangeThumb
+                min={Number(this.lowerValue)}
+                max={max}
+                value={this.upperValue}
+                disabled={disabled}
+                showTicks={showTicks}
+                showInput={showInput}
+                onKeyDown={this.handleUpperKeyDown}
+                onFocus={() => this.toggleHasFocus(true)}
+                onBlur={() => this.toggleHasFocus(false)}
+                style={this.calculateThumbPositionStyle(this.upperValue)}
+              />
+            </React.Fragment>
+          )}
 
           {showRange && (
             <EuiRangeHighlight

From e859174e3e3c14a3f36a1b9722f969ef0955e3a6 Mon Sep 17 00:00:00 2001
From: Greg Thompson <thompson.glowe@gmail.com>
Date: Sat, 26 Jan 2019 12:53:47 -0600
Subject: [PATCH 06/27] WIP: sass refactor using component boundaries

---
 src/components/form/range/_dual_range.scss    |  30 ++
 src/components/form/range/_index.scss         |   9 +-
 src/components/form/range/_mixins.scss        |   8 +
 src/components/form/range/_range.scss         | 417 ------------------
 .../form/range/_range_highlight.scss          |  23 +
 src/components/form/range/_range_input.scss   |  17 +
 src/components/form/range/_range_label.scss   |  18 +
 src/components/form/range/_range_slider.scss  | 107 +++++
 src/components/form/range/_range_tooltip.scss |  87 ++++
 src/components/form/range/_range_track.scss   |  94 ++++
 src/components/form/range/_range_wrapper.scss |  18 +
 src/components/form/range/dual_range.js       |  20 +-
 src/components/form/range/range.js            |  20 +-
 src/components/form/range/range_highlight.js  |  15 +-
 src/components/form/range/range_input.js      |   9 +-
 src/components/form/range/range_label.js      |  16 +-
 src/components/form/range/range_slider.js     |  43 +-
 src/components/form/range/range_tooltip.js    |  11 +-
 src/components/form/range/range_track.js      |  44 +-
 src/components/form/range/range_wrapper.js    |  31 +-
 20 files changed, 519 insertions(+), 518 deletions(-)
 create mode 100644 src/components/form/range/_dual_range.scss
 delete mode 100644 src/components/form/range/_range.scss
 create mode 100644 src/components/form/range/_range_highlight.scss
 create mode 100644 src/components/form/range/_range_input.scss
 create mode 100644 src/components/form/range/_range_label.scss
 create mode 100644 src/components/form/range/_range_slider.scss
 create mode 100644 src/components/form/range/_range_tooltip.scss
 create mode 100644 src/components/form/range/_range_track.scss
 create mode 100644 src/components/form/range/_range_wrapper.scss

diff --git a/src/components/form/range/_dual_range.scss b/src/components/form/range/_dual_range.scss
new file mode 100644
index 00000000000..428b0702ba5
--- /dev/null
+++ b/src/components/form/range/_dual_range.scss
@@ -0,0 +1,30 @@
+.euiDualRange {
+  &__slider {
+    @include euiRangeThumbPerBrowser {
+      visibility: hidden;
+    }
+  }
+}
+
+.euiRangeThumb {
+  @include euiCustomControl($type: 'round');
+
+  @include euiRangeThumbStyle;
+
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 50%;
+  margin-top: -($euiRangeThumbHeight / 2);
+  z-index: $euiZLevel2;
+
+  pointer-events: none;
+
+  &:focus {
+    @include euiCustomControlFocused;
+  }
+
+  &--hasTicks {
+    top: 25%;
+  }
+}
diff --git a/src/components/form/range/_index.scss b/src/components/form/range/_index.scss
index 7ef7e10548a..d05ef6cd7d2 100644
--- a/src/components/form/range/_index.scss
+++ b/src/components/form/range/_index.scss
@@ -1,3 +1,10 @@
 @import 'variables';
 @import 'mixins';
-@import 'range';
+@import 'range_highlight';
+@import 'range_input';
+@import 'range_label';
+@import 'range_slider';
+@import 'range_tooltip';
+@import 'range_track';
+@import 'range_wrapper';
+@import 'dual_range';
diff --git a/src/components/form/range/_mixins.scss b/src/components/form/range/_mixins.scss
index dd9bdb9874d..9103408d8f0 100644
--- a/src/components/form/range/_mixins.scss
+++ b/src/components/form/range/_mixins.scss
@@ -14,6 +14,14 @@
   &::-ms-fill-upper { @content; }
 }
 
+@mixin euiRangeThumbStyle {
+  cursor: pointer;
+  border-color: $euiRangeThumbBorderColor;
+  padding: 0;
+  height: $euiRangeThumbHeight;
+  width: $euiRangeThumbWidth;
+}
+
 @mixin euiRangeThumbPerBrowser {
   &::-webkit-slider-thumb { @content; }
   &::-moz-range-thumb { @content; }
diff --git a/src/components/form/range/_range.scss b/src/components/form/range/_range.scss
deleted file mode 100644
index 9cee9ff7ab5..00000000000
--- a/src/components/form/range/_range.scss
+++ /dev/null
@@ -1,417 +0,0 @@
-/*
- * 1. There's no way to target the layout of the extra input, so we must
- *    use the descendant selector to allow the width to shrink.
- * 2. Align extra input slightly better with slider labels, in an IE compliant way.
- * 3. Adjust vertical alignment of input based on extras
- */
-
-.euiRange__wrapper {
-  @include euiFormControlSize;
-  display: flex;
-  align-items: center;
-
-  &--fullWidth {
-    max-width: 100%;
-  }
-
-  &--disabled {
-    .euiRange__minLabel,
-    .euiRange__maxLabel,
-    .euiRange__inputWrapper {
-      opacity: .25;
-    }
-  }
-
-  > .euiFormControlLayout { /* 1 */
-    width: auto;
-  }
-}
-
-.euiRange__inputWrapper {
-  height: 100%; // Don't overflow `euiRange__wrapper`
-  flex-grow: 1;
-  position: relative; // for positioning ticks/levels
-  align-self: flex-start; /* 3 */
-}
-
-.euiRange__minLabel,
-.euiRange__maxLabel {
-  font-size: $euiFontSizeXS;
-}
-
-.euiRange__minLabel {
-  margin-right: $euiSizeS;
-}
-
-.euiRange__maxLabel {
-  margin-left: $euiSizeS;
-}
-
-.euiRange__extraInput {
-  width: auto;
-  margin-left: $euiSize;
-  position: relative; /* 2 */
-  top: -2px; /* 2 */
-}
-
-.euiRange__tick {
-  overflow-x: hidden;
-  text-overflow: ellipsis;
-  font-size: $euiFontSizeXS;
-  position: relative;
-  padding-top: $euiSize;
-
-  &::before {
-    @include size($euiSizeXS);
-
-    content: '';
-    background-color: $euiColorDarkShade;
-    border-radius: 100%;
-    position: absolute;
-    top: 0;
-    left: calc(50% - #{($euiSizeXS/2)});
-  }
-
-  &-isCustom {
-    position: absolute;
-    transform: translateX(-50%);
-  }
-
-  &:enabled:hover,
-  &:focus,
-  &--selected {
-    color: $euiColorPrimary;
-  }
-
-  &--selected {
-    font-weight: $euiFontWeightMedium;
-  }
-
-  &:disabled {
-    cursor: not-allowed;
-  }
-}
-
-.euiRange__levels {
-  display: flex;
-  justify-content: stretch;
-  z-index: $euiZLevel0;
-}
-
-[class*='euiRange__level--'] {
-  display: block;
-  height: 6px;
-  border-radius: 6px;
-  margin: 2px;
-}
-
-// Modifier naming and colors.
-$euiRangeLevelColors: (
-  primary: $euiColorPrimary,
-  success: $euiColorSuccess,
-  warning: $euiColorWarning,
-  danger: $euiColorDanger,
-);
-
-// Create level modifiers based upon the map.
-@each $name, $color in $euiRangeLevelColors {
-  .euiRange__level--#{$name} {
-    background-color: transparentize($color, .7);
-  }
-}
-
-.euiRange__range__progress {
-  height: 4px;
-  border-radius: 4px;
-  background-color: $euiRangeTrackColor;
-
-  &--hasFocus {
-    background-color: $euiColorPrimary;
-  }
-}
-
-.euiRange__value {
-  // Indentation for legibility in transition
-  // sass-lint:disable-block indentation
-  @include euiFontSizeS;
-  border: 1px solid transparentize($euiColorDarkestShade, .8);
-  position: absolute;
-  border-radius: $euiBorderRadius;
-  padding: ($euiSizeXS / 2) $euiSizeS;
-  background-color: tintOrShade($euiColorFullShade, 25%, 90%);
-  color: $euiColorGhost;
-  max-width: 256px;
-  z-index: $euiZLevel4;
-  top: ($euiFormControlHeight / 2) - 1px;
-  transition:
-    box-shadow $euiAnimSpeedNormal $euiAnimSlightResistance,
-    transform $euiAnimSpeedNormal $euiAnimSlightResistance;
-
-  // Custom sizing
-  $arrowSize: $euiSizeM;
-  $arrowMinusSize: (($arrowSize / 2) - 1px) * -1;
-
-  &::after,
-  &::before {
-    content: '';
-    position: absolute;
-    bottom: -$arrowSize / 2;
-    left: 50%;
-    transform-origin: center;
-    background-color: tintOrShade($euiColorFullShade, 25%, 90%);
-    width: $arrowSize;
-    height: $arrowSize;
-    border-radius: 2px;
-  }
-
-  &::before {
-    background-color: transparentize($euiColorDarkestShade, .8);
-  }
-
-  // Positions the arrow
-  &.euiRange__value--right {
-    transform: translateX(0) translateY(-50%);
-    margin-left: $euiSizeL;
-
-    &:before,
-    &:after {
-      bottom: 50%;
-      left: $arrowMinusSize;
-      transform: translateY(50%) rotateZ(45deg);
-    }
-
-    &::before {
-      margin-left: -1px;
-    }
-  }
-
-  &.euiRange__value--left {
-    transform: translateX(-100%) translateY(-50%);
-    margin-left: -$euiSizeL;
-
-    &:before,
-    &:after {
-      bottom: 50%;
-      left: auto;
-      right: $arrowMinusSize;
-      transform: translateY(50%) rotateZ(45deg);
-    }
-
-    &::before {
-      margin-right: -1px;
-    }
-  }
-}
-
-
-/*
- *  Positioning
- */
-
-.euiRange__wrapper--hasLevels {
-  .euiRange__levels {
-    position: absolute;
-    left: 0;
-    right: 0;
-    top: ($euiFormControlHeight / 2) + 2px;
-  }
-}
-
-.euiRange__wrapper--hasRange {
-  .euiRange__range {
-    position: absolute;
-    left: 0;
-    width: 100%;
-    top: ($euiFormControlHeight / 2) - 2px;
-    z-index: $euiZLevel0;
-    overflow: hidden;
-  }
-}
-
-.euiRange__wrapper--hasTicks {
-  .euiRange {
-    height: $euiFormControlHeight / 2; /* 3 */
-  }
-
-  .euiRange__levels {
-    top: ($euiFormControlHeight / 4) + 2px;
-  }
-
-  .euiRange__range {
-    top: ($euiFormControlHeight / 4) - 2px;
-    left: 0;
-  }
-
-  .euiRange__value {
-    top: ($euiFormControlHeight / 4) - 1px;
-  }
-
-  .euiRange__extraInput {
-    margin-top: 0;
-  }
-
-  .euiRange__ticks {
-    position: absolute;
-    left: ($euiRangeThumbWidth / 2);
-    right: ($euiRangeThumbWidth / 2);
-    top: $euiSizeS;
-    display: flex;
-    z-index: $euiZLevel1;
-  }
-}
-
-.euiRange__valueWrapper {
-  // Keeps tooltip (value) aligned to percentage of actual slider
-  display: block;
-  position: absolute;
-  left: 0;
-  top: 0;
-  bottom: 0;
-  width: calc(100% - #{$euiRangeThumbWidth});
-  margin-left: $euiRangeThumbWidth / 2;
-}
-
-/*
- *  Input Range Customization by browser
- */
-
-// The following code is inspired by...
-
-// Github: https://github.com/darlanrod/input-range-sass
-// Author: Darlan Rod https://github.com/darlanrod
-// Version 1.4.1
-// MIT License
-
-// It has been modified to fit the styling patterns of Kibana and
-// to be more easily maintained / themeable going forward.
-
-.euiRange {
-  // Auto means the height isn't defined
-  height: $euiFormControlHeight;
-  appearance: none;
-  background: transparent; // Otherwise white in Chrome
-  width: 100%; // ensures the slider expands to fill flex display
-  position: relative;
-  z-index: $euiZLevel2; // stay above tick marks
-  cursor: pointer; // Keep cursor to full range bounds
-
-  &:disabled {
-    cursor: not-allowed;
-
-    // sass-lint:disable-block mixins-before-declarations
-    @include euiRangeThumbPerBrowser {
-      cursor: not-allowed;
-      border-color: $euiRangeThumbBorderColor;
-      background-color: $euiRangeThumbBorderColor;
-      box-shadow: none;
-    }
-  }
-
-  &:focus {
-    @include euiRangeThumbPerBrowser {
-      @include euiCustomControlFocused;
-    }
-
-    @include euiRangeTrackPerBrowser {
-      background-color: $euiColorPrimary;
-      border-color: $euiColorPrimary;
-    }
-
-    ~ .euiRange__range .euiRange__range__progress {
-      background-color: $euiColorPrimary;
-    }
-
-    ~ .euiRange__valueWrapper .euiRange__value {
-      @include euiBottomShadowMedium;
-
-      &.euiRange__value--right {
-        transform: translateX(0) translateY(-50%) scale(1.1);
-      }
-
-      &.euiRange__value--left {
-        transform: translateX(-100%) translateY(-50%) scale(1.1);
-      }
-    }
-  }
-
-  @include euiRangeThumbPerBrowser {
-    @include euiCustomControl($type: 'round');
-
-    cursor: pointer;
-    border-color: $euiRangeThumbBorderColor;
-    padding: 0;
-    height: $euiRangeThumbHeight;
-    width: $euiRangeThumbWidth;
-  }
-
-  @include euiRangeTrackPerBrowser {
-    @include euiRangeTrackSize;
-
-    background: $euiRangeTrackColor;
-    border: $euiRangeTrackBorderWidth solid $euiRangeTrackBorderColor;
-    border-radius: $euiRangeTrackRadius;
-  }
-
-  // Resets
-
-  // Disable linter for these very unique vendor controls
-  // sass-lint:disable-block no-vendor-prefixes
-  &::-webkit-slider-thumb {
-    -webkit-appearance: none;
-    margin-top: ((-$euiRangeTrackBorderWidth * 2 + $euiRangeTrackHeight) / 2) - ($euiRangeThumbHeight / 2);
-  }
-
-  &::-ms-thumb {
-    margin-top: 0;
-  }
-
-  &::-ms-track {
-    @include euiRangeTrackSize;
-
-    background: transparent;
-    border-color: transparent;
-    border-width: ($euiRangeThumbHeight / 2) 0;
-    color: transparent;
-  }
-
-  &--dual {
-    @include euiRangeThumbPerBrowser {
-      opacity: 0; // display: hidden doesn't work. Find something better
-    }
-  }
-}
-
-.euiRange__wrapper--hasRange .euiRange,
-.euiRange__wrapper--hasTicks .euiRange {
-  @include euiRangeTrackPerBrowser {
-    background-color: transparentize($euiRangeTrackColor, .6);
-    border-color: transparentize($euiRangeTrackBorderColor, .6);
-  }
-}
-
-.euiRange__thumb {
-  @include euiCustomControl($type: 'round');
-
-  cursor: pointer;
-  border-color: $euiRangeThumbBorderColor;
-  padding: 0;
-  height: $euiRangeThumbHeight;
-  width: $euiRangeThumbWidth;
-
-  content: '';
-  position: absolute;
-  left: 0;
-  top: 50%;
-  margin-top: -($euiRangeThumbHeight / 2);
-  z-index: $euiZLevel2;
-
-  pointer-events: none;
-
-  &:focus {
-    @include euiCustomControlFocused;
-  }
-
-  &--hasTicks {
-    top: 25%;
-  }
-}
diff --git a/src/components/form/range/_range_highlight.scss b/src/components/form/range/_range_highlight.scss
new file mode 100644
index 00000000000..cc1da38aa55
--- /dev/null
+++ b/src/components/form/range/_range_highlight.scss
@@ -0,0 +1,23 @@
+.euiRangeHighlight {
+  position: absolute;
+  left: 0;
+  width: 100%;
+  top: ($euiFormControlHeight / 2) - 2px;
+  z-index: $euiZLevel0;
+  overflow: hidden;
+
+  &__progress {
+    height: 4px;
+    border-radius: 4px;
+    background-color: $euiRangeTrackColor;
+
+    &--hasFocus {
+      background-color: $euiColorPrimary;
+    }
+  }
+
+  &--hasTicks {
+    top: ($euiFormControlHeight / 4) - 2px;
+    left: 0;
+  }
+}
diff --git a/src/components/form/range/_range_input.scss b/src/components/form/range/_range_input.scss
new file mode 100644
index 00000000000..eb3addf4fcd
--- /dev/null
+++ b/src/components/form/range/_range_input.scss
@@ -0,0 +1,17 @@
+/*
+ * 1. Align extra input slightly better with slider labels, in an IE compliant way.
+ */
+
+.euiRangeInput {
+  width: auto;
+  position: relative; /* 1 */
+  top: -2px; /* 1 */
+
+  &--min {
+    margin-right: $euiSize;
+  }
+
+  &--max {
+    margin-left: $euiSize;
+  }
+}
diff --git a/src/components/form/range/_range_label.scss b/src/components/form/range/_range_label.scss
new file mode 100644
index 00000000000..0cd3a8a1eec
--- /dev/null
+++ b/src/components/form/range/_range_label.scss
@@ -0,0 +1,18 @@
+.euiRangeLabel {
+  &--min,
+  &--max {
+    font-size: $euiFontSizeXS;
+  }
+
+  &--min {
+    margin-right: $euiSizeS;
+  }
+
+  &--max {
+    margin-left: $euiSizeS;
+  }
+
+  &--isDisabled {
+    opacity: .25;
+  }
+}
diff --git a/src/components/form/range/_range_slider.scss b/src/components/form/range/_range_slider.scss
new file mode 100644
index 00000000000..6884431b1d4
--- /dev/null
+++ b/src/components/form/range/_range_slider.scss
@@ -0,0 +1,107 @@
+/*
+ *  Input Range Customization by browser
+ */
+
+// The following code is inspired by...
+
+// Github: https://github.com/darlanrod/input-range-sass
+// Author: Darlan Rod https://github.com/darlanrod
+// Version 1.4.1
+// MIT License
+
+// It has been modified to fit the styling patterns of Kibana and
+// to be more easily maintained / themeable going forward.
+
+.euiRangeSlider {
+  // Auto means the height isn't defined
+  height: $euiFormControlHeight;
+  appearance: none;
+  background: transparent; // Otherwise white in Chrome
+  width: 100%; // ensures the slider expands to fill flex display
+  position: relative;
+  z-index: $euiZLevel2; // stay above tick marks
+  cursor: pointer; // Keep cursor to full range bounds
+
+  &:disabled {
+    cursor: not-allowed;
+
+    // sass-lint:disable-block mixins-before-declarations
+    @include euiRangeThumbPerBrowser {
+      cursor: not-allowed;
+      border-color: $euiRangeThumbBorderColor;
+      background-color: $euiRangeThumbBorderColor;
+      box-shadow: none;
+    }
+  }
+
+  &:focus {
+    @include euiRangeThumbPerBrowser {
+      @include euiCustomControlFocused;
+    }
+
+    @include euiRangeTrackPerBrowser {
+      background-color: $euiColorPrimary;
+      border-color: $euiColorPrimary;
+    }
+
+    ~ .euiRangeHighlight .euiRangeHighlight__progress {
+      background-color: $euiColorPrimary;
+    }
+
+    ~ .euiRangeTooltip .euiRangeTooltip__value {
+      @include euiBottomShadowMedium;
+
+      &.euiRangeTooltip__value--right {
+        transform: translateX(0) translateY(-50%) scale(1.1);
+      }
+
+      &.euiRangeTooltip__value--left {
+        transform: translateX(-100%) translateY(-50%) scale(1.1);
+      }
+    }
+  }
+
+  @include euiRangeThumbPerBrowser {
+    @include euiCustomControl($type: 'round');
+
+    @include euiRangeThumbStyle;
+  }
+
+  @include euiRangeTrackPerBrowser {
+    @include euiRangeTrackSize;
+
+    background: $euiRangeTrackColor;
+    border: $euiRangeTrackBorderWidth solid $euiRangeTrackBorderColor;
+    border-radius: $euiRangeTrackRadius;
+
+    background-color: transparentize($euiRangeTrackColor, .6);
+    border-color: transparentize($euiRangeTrackBorderColor, .6);
+  }
+
+  // Resets
+
+  // Disable linter for these very unique vendor controls
+  // sass-lint:disable-block no-vendor-prefixes
+  &::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    margin-top: ((-$euiRangeTrackBorderWidth * 2 + $euiRangeTrackHeight) / 2) - ($euiRangeThumbHeight / 2);
+  }
+
+  &::-ms-thumb {
+    margin-top: 0;
+  }
+
+  &::-ms-track {
+    @include euiRangeTrackSize;
+
+    background: transparent;
+    border-color: transparent;
+    border-width: ($euiRangeThumbHeight / 2) 0;
+    color: transparent;
+  }
+
+  // States
+  &--hasTicks {
+    height: $euiFormControlHeight / 2; // Adjust vertical alignment of input based on extras
+  }
+}
diff --git a/src/components/form/range/_range_tooltip.scss b/src/components/form/range/_range_tooltip.scss
new file mode 100644
index 00000000000..ebbe92dae4e
--- /dev/null
+++ b/src/components/form/range/_range_tooltip.scss
@@ -0,0 +1,87 @@
+.euiRangeTooltip {
+  // Keeps tooltip (value) aligned to percentage of actual slider
+  display: block;
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  width: calc(100% - #{$euiRangeThumbWidth});
+  margin-left: $euiRangeThumbWidth / 2;
+}
+
+.euiRangeTooltip__value {
+  // Indentation for legibility in transition
+  // sass-lint:disable-block indentation
+  @include euiFontSizeS;
+  border: 1px solid transparentize($euiColorDarkestShade, .8);
+  position: absolute;
+  border-radius: $euiBorderRadius;
+  padding: ($euiSizeXS / 2) $euiSizeS;
+  background-color: tintOrShade($euiColorFullShade, 25%, 90%);
+  color: $euiColorGhost;
+  max-width: 256px;
+  z-index: $euiZLevel4;
+  top: ($euiFormControlHeight / 2) - 1px;
+  transition:
+    box-shadow $euiAnimSpeedNormal $euiAnimSlightResistance,
+    transform $euiAnimSpeedNormal $euiAnimSlightResistance;
+
+  // Custom sizing
+  $arrowSize: $euiSizeM;
+  $arrowMinusSize: (($arrowSize / 2) - 1px) * -1;
+
+  &::after,
+  &::before {
+    content: '';
+    position: absolute;
+    bottom: -$arrowSize / 2;
+    left: 50%;
+    transform-origin: center;
+    background-color: tintOrShade($euiColorFullShade, 25%, 90%);
+    width: $arrowSize;
+    height: $arrowSize;
+    border-radius: 2px;
+  }
+
+  &::before {
+    background-color: transparentize($euiColorDarkestShade, .8);
+  }
+
+  // Positions the arrow
+  &.euiRangeTooltip__value--right {
+    transform: translateX(0) translateY(-50%);
+    margin-left: $euiSizeL;
+
+    &:before,
+    &:after {
+      bottom: 50%;
+      left: $arrowMinusSize;
+      transform: translateY(50%) rotateZ(45deg);
+    }
+
+    &::before {
+      margin-left: -1px;
+    }
+  }
+
+  &.euiRangeTooltip__value--left {
+    transform: translateX(-100%) translateY(-50%);
+    margin-left: -$euiSizeL;
+
+    &:before,
+    &:after {
+      bottom: 50%;
+      left: auto;
+      right: $arrowMinusSize;
+      transform: translateY(50%) rotateZ(45deg);
+    }
+
+    &::before {
+      margin-right: -1px;
+    }
+  }
+
+  &--hasTicks {
+    top: ($euiFormControlHeight / 4) - 1px;
+  }
+}
diff --git a/src/components/form/range/_range_track.scss b/src/components/form/range/_range_track.scss
new file mode 100644
index 00000000000..e613a2de664
--- /dev/null
+++ b/src/components/form/range/_range_track.scss
@@ -0,0 +1,94 @@
+.euiRangeTrack {
+  height: 100%; // Don't overflow `euiRangeWrapper`
+  flex-grow: 1;
+  position: relative; // for positioning ticks/levels
+  align-self: flex-start; // Adjust vertical alignment of input based on extras
+
+  &--disabled {
+    opacity: .25;
+  }
+}
+
+.euiRangeTicks {
+  position: absolute;
+  left: ($euiRangeThumbWidth / 2);
+  right: ($euiRangeThumbWidth / 2);
+  top: $euiSizeS;
+  display: flex;
+  z-index: $euiZLevel1;
+}
+
+.euiRangeTick {
+  overflow-x: hidden;
+  text-overflow: ellipsis;
+  font-size: $euiFontSizeXS;
+  position: relative;
+  padding-top: $euiSize;
+
+  &::before {
+    @include size($euiSizeXS);
+
+    content: '';
+    background-color: $euiColorDarkShade;
+    border-radius: 100%;
+    position: absolute;
+    top: 0;
+    left: calc(50% - #{($euiSizeXS/2)});
+  }
+
+  &--isCustom {
+    position: absolute;
+    transform: translateX(-50%);
+  }
+
+  &:enabled:hover,
+  &:focus,
+  &--selected {
+    color: $euiColorPrimary;
+  }
+
+  &--selected {
+    font-weight: $euiFontWeightMedium;
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+  }
+}
+
+.euiRangeLevels {
+  display: flex;
+  justify-content: stretch;
+  z-index: $euiZLevel0;
+
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: ($euiFormControlHeight / 2) + 2px;
+
+  &--hasTicks {
+    top: ($euiFormControlHeight / 4) + 2px;
+  }
+}
+
+.euiRangeLevel {
+  display: block;
+  height: 6px;
+  border-radius: 6px;
+  margin: 2px;
+}
+
+// Modifier naming and colors.
+$euiRangeLevelColors: (
+  primary: $euiColorPrimary,
+  success: $euiColorSuccess,
+  warning: $euiColorWarning,
+  danger: $euiColorDanger,
+);
+
+// Create level modifiers based upon the map.
+@each $name, $color in $euiRangeLevelColors {
+  .euiRangeLevel--#{$name} {
+    background-color: transparentize($color, .7);
+  }
+}
diff --git a/src/components/form/range/_range_wrapper.scss b/src/components/form/range/_range_wrapper.scss
new file mode 100644
index 00000000000..a5427154129
--- /dev/null
+++ b/src/components/form/range/_range_wrapper.scss
@@ -0,0 +1,18 @@
+/*
+ * 1. There's no way to target the layout of the extra input, so we must
+ *    use the descendant selector to allow the width to shrink.
+ */
+
+.euiRangeWrapper {
+  @include euiFormControlSize;
+  display: flex;
+  align-items: center;
+
+  &--fullWidth {
+    max-width: 100%;
+  }
+
+  > .euiFormControlLayout { /* 1 */
+    width: auto;
+  }
+}
diff --git a/src/components/form/range/dual_range.js b/src/components/form/range/dual_range.js
index 88190fb15d1..91cc038b035 100644
--- a/src/components/form/range/dual_range.js
+++ b/src/components/form/range/dual_range.js
@@ -146,20 +146,16 @@ export class EuiDualRange extends Component {
       ...rest
     } = this.props;
 
-    const rangeClasses = classNames('euiRange', 'euiRange--dual', className);
+    const rangeClasses = classNames('euiDualRange__slider', className);
 
     return (
       <EuiRangeWrapper
-        compressed={compressed}
-        disabled={disabled}
+        className="euiDualRange"
         fullWidth={fullWidth}
-        showLabels={showLabels}
-        showTicks={showTicks}
-        levels={levels}
-        showRange={showRange}
       >
         {showInput && (
           <EuiRangeInput
+            side="min"
             min={min}
             max={Number(this.upperValue)}
             step={step}
@@ -170,7 +166,7 @@ export class EuiDualRange extends Component {
             name={name}
           />
         )}
-        {showLabels && <EuiRangeLabel side="min">{min}</EuiRangeLabel>}
+        {showLabels && <EuiRangeLabel side="min" disabled={disabled}>{min}</EuiRangeLabel>}
         <EuiRangeTrack
           disabled={disabled}
           max={max}
@@ -195,6 +191,7 @@ export class EuiDualRange extends Component {
             disabled={disabled}
             onChange={this.handleSliderChange}
             style={style}
+            showTicks={showTicks}
             tabIndex={'-1'}
             {...rest}
           />
@@ -231,6 +228,7 @@ export class EuiDualRange extends Component {
           {showRange && (
             <EuiRangeHighlight
               hasFocus={this.state.hasFocus}
+              showTicks={showTicks}
               min={Number(min)}
               max={Number(max)}
               lowerValue={Number(this.lowerValue)}
@@ -238,7 +236,7 @@ export class EuiDualRange extends Component {
             />
           )}
         </EuiRangeTrack>
-        {showLabels && <EuiRangeLabel side="max">{max}</EuiRangeLabel>}
+        {showLabels && <EuiRangeLabel side="max" disabled={disabled}>{max}</EuiRangeLabel>}
         {showInput && (
           <EuiRangeInput
             min={Number(this.lowerValue)}
@@ -324,9 +322,9 @@ EuiDualRange.defaultProps = {
 
 const EuiRangeThumb = ({ min, max, value, disabled, showInput, showTicks, ...rest }) => {
   const classes = classNames(
-    'euiRange__thumb',
+    'euiRangeThumb',
     {
-      'euiRange__thumb--hasTicks': showTicks
+      'euiRangeThumb--hasTicks': showTicks
     },
   );
   return (
diff --git a/src/components/form/range/range.js b/src/components/form/range/range.js
index 6f0e8a989e7..84795cba770 100644
--- a/src/components/form/range/range.js
+++ b/src/components/form/range/range.js
@@ -1,6 +1,5 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
 
 import { EuiRangeHighlight } from './range_highlight';
 import { EuiRangeInput } from './range_input';
@@ -36,20 +35,12 @@ export const EuiRange = ({
   ...rest
 }) => {
 
-  const classes = classNames('euiRange', className);
-
   return (
     <EuiRangeWrapper
-      compressed={compressed}
-      disabled={disabled}
+      className="euiRange"
       fullWidth={fullWidth}
-      showLabels={showLabels}
-      showTicks={showTicks}
-      levels={levels}
-      showRange={showRange}
-      showValue={showValue}
     >
-      {showLabels && <EuiRangeLabel side="min">{min}</EuiRangeLabel>}
+      {showLabels && <EuiRangeLabel side="min" disabled={disabled}>{min}</EuiRangeLabel>}
       <EuiRangeTrack
         disabled={disabled}
         max={max}
@@ -65,7 +56,7 @@ export const EuiRange = ({
         <EuiRangeSlider
           id={id}
           name={name}
-          className={classes}
+          className={className}
           min={min}
           max={max}
           step={step}
@@ -73,6 +64,7 @@ export const EuiRange = ({
           disabled={disabled}
           onChange={onChange}
           style={style}
+          showTicks={showTicks}
           tabIndex={showInput ? '-1' : (tabIndex || null)}
           {...rest}
         />
@@ -83,11 +75,13 @@ export const EuiRange = ({
             max={max}
             min={min}
             name={name}
+            showTicks={showTicks}
           />
         )}
 
         {showRange && (
           <EuiRangeHighlight
+            showTicks={showTicks}
             min={Number(min)}
             max={Number(max)}
             lowerValue={Number(min)}
@@ -95,7 +89,7 @@ export const EuiRange = ({
           />
         )}
       </EuiRangeTrack>
-      {showLabels && <EuiRangeLabel side="max">{max}</EuiRangeLabel>}
+      {showLabels && <EuiRangeLabel side="max" disabled={disabled}>{max}</EuiRangeLabel>}
       {showInput && (
         <EuiRangeInput
           min={min}
diff --git a/src/components/form/range/range_highlight.js b/src/components/form/range/range_highlight.js
index 320dfa2483f..233adc8682d 100644
--- a/src/components/form/range/range_highlight.js
+++ b/src/components/form/range/range_highlight.js
@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
-export const EuiRangeHighlight = ({ hasFocus, lowerValue, upperValue, max, min }) => {
+export const EuiRangeHighlight = ({ hasFocus, showTicks, lowerValue, upperValue, max, min }) => {
   // Calculate the width the range based on value
   // const rangeWidth = (value - min) / (max - min);
   const leftPosition = (lowerValue - min) / (max - min);
@@ -12,19 +12,24 @@ export const EuiRangeHighlight = ({ hasFocus, lowerValue, upperValue, max, min }
     width: `${rangeWidth * 100}%`
   };
 
-  const classes = classNames('euiRange__range__progress', {
-    'euiRange__range__progress--hasFocus': hasFocus
+  const classes = classNames('euiRangeHighlight', {
+    'euiRangeHighlight--hasTicks': showTicks
+  });
+
+  const progressClasses = classNames('euiRangeHighlight__progress', {
+    'euiRangeHighlight__progress--hasFocus': hasFocus
   });
 
   return (
-    <div className="euiRange__range">
-      <div className={classes} style={rangeWidthStyle} />
+    <div className={classes}>
+      <div className={progressClasses} style={rangeWidthStyle} />
     </div>
   );
 };
 
 EuiRangeHighlight.propTypes = {
   hasFocus: PropTypes.bool,
+  showTicks: PropTypes.bool,
   lowerValue: PropTypes.number.isRequired,
   upperValue: PropTypes.number.isRequired,
   max: PropTypes.number.isRequired,
diff --git a/src/components/form/range/range_input.js b/src/components/form/range/range_input.js
index 353ad6fed4c..bfd96cbcee4 100644
--- a/src/components/form/range/range_input.js
+++ b/src/components/form/range/range_input.js
@@ -12,6 +12,7 @@ export const EuiRangeInput = ({
   compressed,
   onChange,
   name,
+  side,
   ...rest
 }) => {
 
@@ -20,7 +21,7 @@ export const EuiRangeInput = ({
   return (
     <EuiFieldNumber
       name={name}
-      className="euiRange__extraInput"
+      className={`euiRangeInput euiRangeInput--${side}`}
       min={Number(min)}
       max={Number(max)}
       step={step}
@@ -41,5 +42,9 @@ EuiRangeInput.propTypes = {
   value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
   compressed: PropTypes.bool,
   onChange: PropTypes.func,
-  name: PropTypes.string
+  name: PropTypes.string,
+  side: PropTypes.oneOf(['min', 'max'])
+};
+EuiRangeInput.defaultProps = {
+  side: 'max'
 };
diff --git a/src/components/form/range/range_label.js b/src/components/form/range/range_label.js
index f32ce11eb0b..08191c70f60 100644
--- a/src/components/form/range/range_label.js
+++ b/src/components/form/range/range_label.js
@@ -1,11 +1,17 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import classNames from 'classnames';
 
-export const EuiRangeLabel = ({ children, side }) => (
-  <label className={`euiRange__${side}Label`}>
-    {children}
-  </label>
-);
+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.string.isRequired
diff --git a/src/components/form/range/range_slider.js b/src/components/form/range/range_slider.js
index 1203c04fa6e..5c335a7e951 100644
--- a/src/components/form/range/range_slider.js
+++ b/src/components/form/range/range_slider.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import classNames from 'classnames';
 
 export const EuiRangeSlider = React.forwardRef(({
   className,
@@ -13,25 +14,31 @@ export const EuiRangeSlider = React.forwardRef(({
   tabIndex,
   value,
   style,
+  showTicks,
   ...rest
-}, ref) => (
-  <input
-    ref={ref}
-    type="range"
-    id={id}
-    name={name}
-    className={className}
-    min={min}
-    max={max}
-    step={step}
-    value={value}
-    disabled={disabled}
-    onChange={onChange}
-    style={style}
-    tabIndex={tabIndex}
-    {...rest}
-  />
-));
+}, ref) => {
+  const classes = classNames('euiRangeSlider', {
+    'euiRangeSlider--hasTicks': showTicks
+  }, className);
+  return (
+    <input
+      ref={ref}
+      type="range"
+      id={id}
+      name={name}
+      className={classes}
+      min={min}
+      max={max}
+      step={step}
+      value={value}
+      disabled={disabled}
+      onChange={onChange}
+      style={style}
+      tabIndex={tabIndex}
+      {...rest}
+    />
+  );
+});
 
 EuiRangeSlider.propTypes = {
   id: PropTypes.string,
diff --git a/src/components/form/range/range_tooltip.js b/src/components/form/range/range_tooltip.js
index 4ab13cbc1fa..14c926cd853 100644
--- a/src/components/form/range/range_tooltip.js
+++ b/src/components/form/range/range_tooltip.js
@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
-export const EuiRangeTooltip = ({ value, valueAppend, max, min, name }) => {
+export const EuiRangeTooltip = ({ value, valueAppend, max, min, name, showTicks }) => {
   // Calculate the left position based on value
   const decimal = (value - min) / (max - min);
   // Must be between 0-100%
@@ -20,12 +20,15 @@ export const EuiRangeTooltip = ({ value, valueAppend, max, min, name }) => {
 
   // Change left/right position based on value (half way point)
   const valueClasses = classNames(
-    'euiRange__value',
-    `euiRange__value--${valuePositionSide}`,
+    'euiRangeTooltip__value',
+    `euiRangeTooltip__value--${valuePositionSide}`,
+    {
+      'euiRangeTooltip__value--hasTicks': showTicks
+    }
   );
 
   return (
-    <div className="euiRange__valueWrapper">
+    <div className="euiRangeTooltip">
       <output className={valueClasses} htmlFor={name} style={valuePositionStyle}>
         {value}{valueAppend}
       </output>
diff --git a/src/components/form/range/range_track.js b/src/components/form/range/range_track.js
index 2a2719b6ea1..8d74a3c462c 100644
--- a/src/components/form/range/range_track.js
+++ b/src/components/form/range/range_track.js
@@ -60,14 +60,19 @@ export class EuiRangeTrack extends Component {
       }
     }
 
+    const trackClasses = classNames('euiRangeTrack', {
+      'euiRangeTrack--disabled': disabled
+    });
+
     return (
-      <div className="euiRange__inputWrapper" style={inputWrapperStyle}>
+      <div className={trackClasses} style={inputWrapperStyle}>
         {children}
         {!!levels.length && (
           <EuiRangeLevels
             levels={levels}
             max={max}
             min={min}
+            showTicks={showTicks}
           />
         )}
         {showTicks && (
@@ -118,7 +123,7 @@ const EuiRangeTicks = ({ disabled, onChange, ticks, tickObject, value, max }) =>
   const ticksStyle = !!ticks ? undefined : { margin: `0 ${tickObject.percentageWidth / -2}%`, left: 0, right: 0 };
 
   return (
-    <div className="euiRange__ticks" style={ticksStyle}>
+    <div className="euiRangeTicks" style={ticksStyle}>
       {tickObject.sequence.map((tickValue) => {
         const tickStyle = {};
         let customTick;
@@ -135,10 +140,10 @@ const EuiRangeTicks = ({ disabled, onChange, ticks, tickObject, value, max }) =>
         }
 
         const tickClasses = classNames(
-          'euiRange__tick',
+          'euiRangeTick',
           {
-            'euiRange__tick--selected': value === tickValue,
-            'euiRange__tick-isCustom': customTick,
+            'euiRangeTick--selected': value === tickValue,
+            'euiRangeTick--isCustom': customTick,
           }
         );
 
@@ -162,15 +167,20 @@ const EuiRangeTicks = ({ disabled, onChange, ticks, tickObject, value, max }) =>
   );
 };
 
-const EuiRangeLevels = ({ levels, max, min }) => (
-  <div className="euiRange__levels">
-    {levels.map((level, index) => {
-      const range = level.max - level.min;
-      const width = (range / (max - min)) * 100;
-
-      return (
-        <span key={index} style={{ width: `${width}%` }} className={`euiRange__level--${level.color}`} />
-      );
-    })}
-  </div>
-);
+const EuiRangeLevels = ({ levels, max, min, showTicks }) => {
+  const classes = classNames('euiRangeLevels', {
+    'euiRangeLevels--hasTicks': showTicks
+  });
+  return (
+    <div className={classes}>
+      {levels.map((level, index) => {
+        const range = level.max - level.min;
+        const width = (range / (max - min)) * 100;
+
+        return (
+          <span key={index} style={{ width: `${width}%` }} className={`euiRangeLevel euiRangeLevel--${level.color}`} />
+        );
+      })}
+    </div>
+  );
+};
diff --git a/src/components/form/range/range_wrapper.js b/src/components/form/range/range_wrapper.js
index 29157b1dab9..49a11589ce8 100644
--- a/src/components/form/range/range_wrapper.js
+++ b/src/components/form/range/range_wrapper.js
@@ -6,28 +6,16 @@ export const LEVEL_COLORS = ['primary', 'success', 'warning', 'danger'];
 
 export const EuiRangeWrapper = ({
   children,
-  compressed,
-  disabled,
-  fullWidth,
-  showLabels,
-  showTicks,
-  levels,
-  showRange,
-  showValue,
+  className,
+  fullWidth
 }) => {
 
   const classes = classNames(
-    'euiRange__wrapper',
+    'euiRangeWrapper',
     {
-      'euiRange__wrapper--fullWidth': fullWidth,
-      'euiRange__wrapper--compressed': compressed,
-      'euiRange__wrapper--disabled': disabled,
-      'euiRange__wrapper--hasLabels': showLabels,
-      'euiRange__wrapper--hasLevels': levels.length,
-      'euiRange__wrapper--hasRange': showRange,
-      'euiRange__wrapper--hasTicks': showTicks,
-      'euiRange__wrapper--hasValue': showValue,
+      'euiRangeWrapper--fullWidth': fullWidth
     },
+    className
   );
 
   return (
@@ -38,12 +26,5 @@ export const EuiRangeWrapper = ({
 };
 
 EuiRangeWrapper.propTypes = {
-  fullWidth: PropTypes.bool,
-  compressed: PropTypes.bool,
-  showLabels: PropTypes.bool,
-  showInput: PropTypes.bool,
-  showTicks: PropTypes.bool,
-  levels: PropTypes.array,
-  showRange: PropTypes.bool,
-  showValue: PropTypes.bool,
+  fullWidth: PropTypes.bool
 };

From 1fbd0b509ff8cffabc61103c0a4dcb79aa3236d1 Mon Sep 17 00:00:00 2001
From: Greg Thompson <thompson.glowe@gmail.com>
Date: Mon, 28 Jan 2019 09:49:51 -0600
Subject: [PATCH 07/27] update euiRange tests; create euiDualRange tests

---
 .../__snapshots__/dual_range.test.js.snap     | 288 ++++++++++++++++++
 .../range/__snapshots__/range.test.js.snap    |  98 +++---
 src/components/form/range/_range_slider.scss  |   2 +-
 src/components/form/range/dual_range.js       |   8 +-
 src/components/form/range/dual_range.test.js  | 123 ++++++++
 src/components/form/range/range.js            |   1 +
 src/components/form/range/range_tooltip.js    |   2 +-
 7 files changed, 467 insertions(+), 55 deletions(-)
 create mode 100644 src/components/form/range/__snapshots__/dual_range.test.js.snap
 create mode 100644 src/components/form/range/dual_range.test.js

diff --git a/src/components/form/range/__snapshots__/dual_range.test.js.snap b/src/components/form/range/__snapshots__/dual_range.test.js.snap
new file mode 100644
index 00000000000..13f511d25bf
--- /dev/null
+++ b/src/components/form/range/__snapshots__/dual_range.test.js.snap
@@ -0,0 +1,288 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`EuiDualRange allows value prop to accept numbers 1`] = `
+<div
+  class="euiRangeWrapper euiDualRange"
+>
+  <div
+    class="euiRangeTrack"
+  >
+    <input
+      class="euiRangeSlider euiDualRange__slider"
+      max="100"
+      min="1"
+      tabindex="-1"
+      type="range"
+      value="0,8"
+    />
+  </div>
+</div>
+`;
+
+exports[`EuiDualRange is rendered 1`] = `
+<div
+  class="euiRangeWrapper euiDualRange"
+>
+  <div
+    class="euiRangeTrack"
+  >
+    <input
+      aria-label="aria-label"
+      class="euiRangeSlider euiDualRange__slider testClass1 testClass2"
+      data-test-subj="test subject string"
+      id="id"
+      max="10"
+      min="1"
+      name="name"
+      tabindex="-1"
+      type="range"
+      value="0,8"
+    />
+  </div>
+</div>
+`;
+
+exports[`EuiDualRange props compressed should render 1`] = `
+<div
+  class="euiRangeWrapper euiDualRange"
+>
+  <div
+    class="euiRangeTrack"
+  >
+    <input
+      class="euiRangeSlider euiDualRange__slider"
+      max="100"
+      min="1"
+      tabindex="-1"
+      type="range"
+    />
+  </div>
+</div>
+`;
+
+exports[`EuiDualRange props fullWidth should render 1`] = `
+<div
+  class="euiRangeWrapper euiRangeWrapper--fullWidth euiDualRange"
+>
+  <div
+    class="euiRangeTrack"
+  >
+    <input
+      class="euiRangeSlider euiDualRange__slider"
+      max="100"
+      min="1"
+      tabindex="-1"
+      type="range"
+    />
+  </div>
+</div>
+`;
+
+exports[`EuiDualRange props inputs should render 1`] = `
+<div
+  class="euiRangeWrapper euiDualRange"
+>
+  <div
+    class="euiFormControlLayout"
+  >
+    <div
+      class="euiFormControlLayout__childrenWrapper"
+    >
+      <input
+        class="euiFieldNumber euiRangeInput euiRangeInput--min"
+        max="8"
+        min="1"
+        name="name-minValue"
+        style="max-width:3em"
+        type="number"
+        value="0"
+      />
+    </div>
+  </div>
+  <div
+    class="euiRangeTrack"
+  >
+    <input
+      aria-label="aria-label"
+      class="euiRangeSlider euiDualRange__slider testClass1 testClass2"
+      data-test-subj="test subject string"
+      id="id"
+      max="10"
+      min="1"
+      name="name"
+      tabindex="-1"
+      type="range"
+      value="0,8"
+    />
+  </div>
+  <div
+    class="euiFormControlLayout"
+  >
+    <div
+      class="euiFormControlLayout__childrenWrapper"
+    >
+      <input
+        class="euiFieldNumber euiRangeInput euiRangeInput--max"
+        max="10"
+        min="0"
+        name="name-maxValue"
+        style="max-width:4em"
+        type="number"
+        value="8"
+      />
+    </div>
+  </div>
+</div>
+`;
+
+exports[`EuiDualRange props labels should render 1`] = `
+<div
+  class="euiRangeWrapper euiDualRange"
+>
+  <label
+    class="euiRangeLabel euiRangeLabel--min"
+  >
+    1
+  </label>
+  <div
+    class="euiRangeTrack"
+  >
+    <input
+      class="euiRangeSlider euiDualRange__slider"
+      max="100"
+      min="1"
+      tabindex="-1"
+      type="range"
+    />
+  </div>
+  <label
+    class="euiRangeLabel euiRangeLabel--max"
+  >
+    100
+  </label>
+</div>
+`;
+
+exports[`EuiDualRange props levels should render 1`] = `
+<div
+  class="euiRangeWrapper euiDualRange"
+>
+  <div
+    class="euiRangeTrack"
+  >
+    <input
+      class="euiRangeSlider euiDualRange__slider"
+      max="100"
+      min="1"
+      tabindex="-1"
+      type="range"
+    />
+    <div
+      class="euiRangeLevels"
+    >
+      <span
+        class="euiRangeLevel euiRangeLevel--danger"
+        style="width:606.060606060606%"
+      />
+      <span
+        class="euiRangeLevel euiRangeLevel--success"
+        style="width:1414.141414141414%"
+      />
+    </div>
+  </div>
+</div>
+`;
+
+exports[`EuiDualRange props range should render 1`] = `
+<div
+  class="euiRangeWrapper euiDualRange"
+>
+  <div
+    class="euiRangeTrack"
+  >
+    <input
+      class="euiRangeSlider euiDualRange__slider"
+      max="100"
+      min="1"
+      tabindex="-1"
+      type="range"
+    />
+    <div
+      class="euiRangeHighlight"
+    >
+      <div
+        class="euiRangeHighlight__progress"
+        style="margin-left:0%;width:100%"
+      />
+    </div>
+  </div>
+</div>
+`;
+
+exports[`EuiDualRange props ticks should render 1`] = `
+<div
+  class="euiRangeWrapper euiDualRange"
+>
+  <div
+    class="euiRangeTrack"
+  >
+    <input
+      class="euiRangeSlider euiRangeSlider--hasTicks euiDualRange__slider"
+      max="100"
+      min="1"
+      tabindex="-1"
+      type="range"
+    />
+    <div
+      class="euiRangeTicks"
+      style="margin:0 -8.403361344537815%;left:0;right:0"
+    >
+      <button
+        class="euiRangeTick"
+        style="width:16.80672268907563%"
+        tabindex="-1"
+        type="button"
+        value="1"
+      >
+        1
+      </button>
+      <button
+        class="euiRangeTick"
+        style="width:16.80672268907563%"
+        tabindex="-1"
+        type="button"
+        value="21"
+      >
+        21
+      </button>
+      <button
+        class="euiRangeTick"
+        style="width:16.80672268907563%"
+        tabindex="-1"
+        type="button"
+        value="41"
+      >
+        41
+      </button>
+      <button
+        class="euiRangeTick"
+        style="width:16.80672268907563%"
+        tabindex="-1"
+        type="button"
+        value="61"
+      >
+        61
+      </button>
+      <button
+        class="euiRangeTick"
+        style="width:16.80672268907563%"
+        tabindex="-1"
+        type="button"
+        value="81"
+      >
+        81
+      </button>
+    </div>
+  </div>
+</div>
+`;
diff --git a/src/components/form/range/__snapshots__/range.test.js.snap b/src/components/form/range/__snapshots__/range.test.js.snap
index de45d8e5ab5..3f8922888c6 100644
--- a/src/components/form/range/__snapshots__/range.test.js.snap
+++ b/src/components/form/range/__snapshots__/range.test.js.snap
@@ -2,23 +2,23 @@
 
 exports[`EuiRange allows value prop to accept a number 1`] = `
 <div
-  class="euiRange__wrapper euiRange__wrapper--hasValue"
+  class="euiRangeWrapper euiRange"
 >
   <div
-    class="euiRange__inputWrapper"
+    class="euiRangeTrack"
   >
     <input
-      class="euiRange"
+      class="euiRangeSlider"
       max="100"
       min="1"
       type="range"
       value="8"
     />
     <div
-      class="euiRange__valueWrapper"
+      class="euiRangeTooltip"
     >
       <output
-        class="euiRange__value euiRange__value--right"
+        class="euiRangeTooltip__value euiRangeTooltip__value--right"
         style="left:7.07070707070707%"
       >
         8
@@ -30,14 +30,14 @@ exports[`EuiRange allows value prop to accept a number 1`] = `
 
 exports[`EuiRange is rendered 1`] = `
 <div
-  class="euiRange__wrapper"
+  class="euiRangeWrapper euiRange"
 >
   <div
-    class="euiRange__inputWrapper"
+    class="euiRangeTrack"
   >
     <input
       aria-label="aria-label"
-      class="euiRange testClass1 testClass2"
+      class="euiRangeSlider testClass1 testClass2"
       data-test-subj="test subject string"
       id="id"
       max="10"
@@ -52,13 +52,13 @@ exports[`EuiRange is rendered 1`] = `
 
 exports[`EuiRange props compressed should render 1`] = `
 <div
-  class="euiRange__wrapper euiRange__wrapper--compressed"
+  class="euiRangeWrapper euiRange"
 >
   <div
-    class="euiRange__inputWrapper"
+    class="euiRangeTrack"
   >
     <input
-      class="euiRange euiRange--compressed"
+      class="euiRangeSlider"
       max="100"
       min="1"
       type="range"
@@ -69,14 +69,14 @@ exports[`EuiRange props compressed should render 1`] = `
 
 exports[`EuiRange props extra input should render 1`] = `
 <div
-  class="euiRange__wrapper"
+  class="euiRangeWrapper euiRange"
 >
   <div
-    class="euiRange__inputWrapper"
+    class="euiRangeTrack"
   >
     <input
       aria-label="aria-label"
-      class="euiRange testClass1 testClass2"
+      class="euiRangeSlider testClass1 testClass2"
       data-test-subj="test subject string"
       id="id"
       max="10"
@@ -95,7 +95,7 @@ exports[`EuiRange props extra input should render 1`] = `
     >
       <input
         aria-label="aria-label"
-        class="euiFieldNumber euiRange__extraInput"
+        class="euiFieldNumber euiRangeInput euiRangeInput--max"
         data-test-subj="test subject string"
         max="10"
         min="1"
@@ -111,13 +111,13 @@ exports[`EuiRange props extra input should render 1`] = `
 
 exports[`EuiRange props fullWidth should render 1`] = `
 <div
-  class="euiRange__wrapper euiRange__wrapper--fullWidth"
+  class="euiRangeWrapper euiRangeWrapper--fullWidth euiRange"
 >
   <div
-    class="euiRange__inputWrapper"
+    class="euiRangeTrack"
   >
     <input
-      class="euiRange euiRange--fullWidth"
+      class="euiRangeSlider"
       max="100"
       min="1"
       type="range"
@@ -128,25 +128,25 @@ exports[`EuiRange props fullWidth should render 1`] = `
 
 exports[`EuiRange props labels should render 1`] = `
 <div
-  class="euiRange__wrapper euiRange__wrapper--hasLabels"
+  class="euiRangeWrapper euiRange"
 >
   <label
-    class="euiRange__minLabel"
+    class="euiRangeLabel euiRangeLabel--min"
   >
     1
   </label>
   <div
-    class="euiRange__inputWrapper"
+    class="euiRangeTrack"
   >
     <input
-      class="euiRange"
+      class="euiRangeSlider"
       max="100"
       min="1"
       type="range"
     />
   </div>
   <label
-    class="euiRange__maxLabel"
+    class="euiRangeLabel euiRangeLabel--max"
   >
     100
   </label>
@@ -155,26 +155,26 @@ exports[`EuiRange props labels should render 1`] = `
 
 exports[`EuiRange props levels should render 1`] = `
 <div
-  class="euiRange__wrapper euiRange__wrapper--hasLevels"
+  class="euiRangeWrapper euiRange"
 >
   <div
-    class="euiRange__inputWrapper"
+    class="euiRangeTrack"
   >
     <input
-      class="euiRange"
+      class="euiRangeSlider"
       max="100"
       min="1"
       type="range"
     />
     <div
-      class="euiRange__levels"
+      class="euiRangeLevels"
     >
       <span
-        class="euiRange__level--danger"
+        class="euiRangeLevel euiRangeLevel--danger"
         style="width:606.060606060606%"
       />
       <span
-        class="euiRange__level--success"
+        class="euiRangeLevel euiRangeLevel--success"
         style="width:1414.141414141414%"
       />
     </div>
@@ -184,23 +184,23 @@ exports[`EuiRange props levels should render 1`] = `
 
 exports[`EuiRange props range should render 1`] = `
 <div
-  class="euiRange__wrapper euiRange__wrapper--hasRange"
+  class="euiRangeWrapper euiRange"
 >
   <div
-    class="euiRange__inputWrapper"
+    class="euiRangeTrack"
   >
     <input
-      class="euiRange"
+      class="euiRangeSlider"
       max="100"
       min="1"
       type="range"
     />
     <div
-      class="euiRange__range"
+      class="euiRangeHighlight"
     >
       <div
-        class="euiRange__range__progress"
-        style="width:NaN%"
+        class="euiRangeHighlight__progress"
+        style="margin-left:0%;width:NaN%"
       />
     </div>
   </div>
@@ -209,23 +209,23 @@ exports[`EuiRange props range should render 1`] = `
 
 exports[`EuiRange props ticks should render 1`] = `
 <div
-  class="euiRange__wrapper euiRange__wrapper--hasTicks"
+  class="euiRangeWrapper euiRange"
 >
   <div
-    class="euiRange__inputWrapper"
+    class="euiRangeTrack"
   >
     <input
-      class="euiRange"
+      class="euiRangeSlider euiRangeSlider--hasTicks"
       max="100"
       min="1"
       type="range"
     />
     <div
-      class="euiRange__ticks"
+      class="euiRangeTicks"
       style="margin:0 -8.403361344537815%;left:0;right:0"
     >
       <button
-        class="euiRange__tick"
+        class="euiRangeTick"
         style="width:16.80672268907563%"
         tabindex="-1"
         type="button"
@@ -234,7 +234,7 @@ exports[`EuiRange props ticks should render 1`] = `
         1
       </button>
       <button
-        class="euiRange__tick"
+        class="euiRangeTick"
         style="width:16.80672268907563%"
         tabindex="-1"
         type="button"
@@ -243,7 +243,7 @@ exports[`EuiRange props ticks should render 1`] = `
         21
       </button>
       <button
-        class="euiRange__tick"
+        class="euiRangeTick"
         style="width:16.80672268907563%"
         tabindex="-1"
         type="button"
@@ -252,7 +252,7 @@ exports[`EuiRange props ticks should render 1`] = `
         41
       </button>
       <button
-        class="euiRange__tick"
+        class="euiRangeTick"
         style="width:16.80672268907563%"
         tabindex="-1"
         type="button"
@@ -261,7 +261,7 @@ exports[`EuiRange props ticks should render 1`] = `
         61
       </button>
       <button
-        class="euiRange__tick"
+        class="euiRangeTick"
         style="width:16.80672268907563%"
         tabindex="-1"
         type="button"
@@ -276,22 +276,22 @@ exports[`EuiRange props ticks should render 1`] = `
 
 exports[`EuiRange props value should render 1`] = `
 <div
-  class="euiRange__wrapper euiRange__wrapper--hasValue"
+  class="euiRangeWrapper euiRange"
 >
   <div
-    class="euiRange__inputWrapper"
+    class="euiRangeTrack"
   >
     <input
-      class="euiRange"
+      class="euiRangeSlider"
       max="100"
       min="1"
       type="range"
     />
     <div
-      class="euiRange__valueWrapper"
+      class="euiRangeTooltip"
     >
       <output
-        class="euiRange__value euiRange__value--left"
+        class="euiRangeTooltip__value euiRangeTooltip__value--left"
         style="left:100%"
       />
     </div>
diff --git a/src/components/form/range/_range_slider.scss b/src/components/form/range/_range_slider.scss
index 6884431b1d4..026a2440d34 100644
--- a/src/components/form/range/_range_slider.scss
+++ b/src/components/form/range/_range_slider.scss
@@ -102,6 +102,6 @@
 
   // States
   &--hasTicks {
-    height: $euiFormControlHeight / 2; // Adjust vertical alignment of input based on extras
+    height: $euiFormControlHeight / 2; // Adjust vertical alignment based on extras
   }
 }
diff --git a/src/components/form/range/dual_range.js b/src/components/form/range/dual_range.js
index 91cc038b035..81db56623c6 100644
--- a/src/components/form/range/dual_range.js
+++ b/src/components/form/range/dual_range.js
@@ -26,10 +26,10 @@ export class EuiDualRange extends Component {
   }
 
   get lowerValue() {
-    return this.props.value[0];
+    return this.props.value ? this.props.value[0] : this.props.min;
   }
   get upperValue() {
-    return this.props.value[1];
+    return this.props.value ? this.props.value[1] : this.props.max;
   }
 
   _determineThumbMovement = (newVal, e) => {
@@ -163,7 +163,7 @@ export class EuiDualRange extends Component {
             disabled={disabled}
             compressed={compressed}
             onChange={this.handleLowerInputChange}
-            name={name}
+            name={`${name}-minValue`}
           />
         )}
         {showLabels && <EuiRangeLabel side="min" disabled={disabled}>{min}</EuiRangeLabel>}
@@ -246,7 +246,7 @@ export class EuiDualRange extends Component {
             disabled={disabled}
             compressed={compressed}
             onChange={this.handleUpperInputChange}
-            name={name}
+            name={`${name}-maxValue`}
           />
         )}
       </EuiRangeWrapper>
diff --git a/src/components/form/range/dual_range.test.js b/src/components/form/range/dual_range.test.js
new file mode 100644
index 00000000000..63e887a71b7
--- /dev/null
+++ b/src/components/form/range/dual_range.test.js
@@ -0,0 +1,123 @@
+import React from 'react';
+import { render } from 'enzyme';
+import { requiredProps } from '../../../test/required_props';
+
+import { EuiDualRange } from './dual_range';
+
+describe('EuiDualRange', () => {
+  test('is rendered', () => {
+    const component = render(
+      <EuiDualRange
+        name="name"
+        id="id"
+        min={1}
+        max={10}
+        value={['0', '8']}
+        onChange={() => {}}
+        {...requiredProps}
+      />
+    );
+
+    expect(component)
+      .toMatchSnapshot();
+  });
+
+  describe('props', () => {
+    test('fullWidth should render', () => {
+      const component = render(
+        <EuiDualRange fullWidth/>
+      );
+
+      expect(component)
+        .toMatchSnapshot();
+    });
+
+    test('compressed should render', () => {
+      const component = render(
+        <EuiDualRange compressed/>
+      );
+
+      expect(component)
+        .toMatchSnapshot();
+    });
+
+    test('labels should render', () => {
+      const component = render(
+        <EuiDualRange showLabels/>
+      );
+
+      expect(component)
+        .toMatchSnapshot();
+    });
+
+    test('ticks should render', () => {
+      const component = render(
+        <EuiDualRange showTicks tickInterval={20}/>
+      );
+
+      expect(component)
+        .toMatchSnapshot();
+    });
+
+    test('range should render', () => {
+      const component = render(
+        <EuiDualRange showRange />
+      );
+
+      expect(component)
+        .toMatchSnapshot();
+    });
+
+    test('inputs should render', () => {
+      const component = render(
+        <EuiDualRange
+          name="name"
+          id="id"
+          min={1}
+          max={10}
+          value={['0', '8']}
+          onChange={() => {}}
+          showInput
+          {...requiredProps}
+        />
+      );
+
+      expect(component)
+        .toMatchSnapshot();
+    });
+
+    test('levels should render', () => {
+      const component = render(
+        <EuiDualRange
+          levels={[
+            {
+              min: 0,
+              max: 600,
+              color: 'danger'
+            },
+            {
+              min: 600,
+              max: 2000,
+              color: 'success'
+            }
+          ]}
+        />
+      );
+
+      expect(component)
+        .toMatchSnapshot();
+    });
+  });
+
+  test('allows value prop to accept numbers', () => {
+    const component = render(
+      <EuiDualRange
+        value={[0, 8]}
+        onChange={() => {}}
+      />
+    );
+
+    expect(component)
+      .toMatchSnapshot();
+  });
+});
diff --git a/src/components/form/range/range.js b/src/components/form/range/range.js
index 84795cba770..60914918497 100644
--- a/src/components/form/range/range.js
+++ b/src/components/form/range/range.js
@@ -100,6 +100,7 @@ export const EuiRange = ({
           compressed={compressed}
           onChange={onChange}
           name={name}
+          {...rest}
         />
       )}
     </EuiRangeWrapper>
diff --git a/src/components/form/range/range_tooltip.js b/src/components/form/range/range_tooltip.js
index 14c926cd853..78e66aaa45c 100644
--- a/src/components/form/range/range_tooltip.js
+++ b/src/components/form/range/range_tooltip.js
@@ -37,7 +37,7 @@ export const EuiRangeTooltip = ({ value, valueAppend, max, min, name, showTicks
 };
 
 EuiRangeTooltip.propTypes = {
-  value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+  value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   valueAppend: PropTypes.string,
   max: PropTypes.number.isRequired,
   min: PropTypes.number.isRequired,

From a6eb6e75c07913c3b8ec0b322bbdbe4e3f65694f Mon Sep 17 00:00:00 2001
From: Greg Thompson <thompson.glowe@gmail.com>
Date: Mon, 28 Jan 2019 10:37:34 -0600
Subject: [PATCH 08/27] move range examples out of formControl; clean up

---
 src-docs/src/routes.js                        |   4 +
 .../form_controls/form_controls_example.js    |  35 -----
 src-docs/src/views/range/dual_range.js        | 136 ++++++++++++++++++
 .../views/{form_controls => range}/range.js   |  61 +-------
 src-docs/src/views/range/range_example.js     |  93 ++++++++++++
 src/components/form/range/_range_label.scss   |   2 +-
 src/components/form/range/_range_track.scss   |   2 +-
 src/components/form/range/_variables.scss     |   2 +
 src/components/form/range/dual_range.js       |  11 +-
 9 files changed, 247 insertions(+), 99 deletions(-)
 create mode 100644 src-docs/src/views/range/dual_range.js
 rename src-docs/src/views/{form_controls => range}/range.js (66%)
 create mode 100644 src-docs/src/views/range/range_example.js

diff --git a/src-docs/src/routes.js b/src-docs/src/routes.js
index 6db4e77e6c6..762d21fb05a 100644
--- a/src-docs/src/routes.js
+++ b/src-docs/src/routes.js
@@ -201,6 +201,9 @@ import { PortalExample }
 import { ProgressExample }
   from './views/progress/progress_example';
 
+import { RangeControlExample }
+  from './views/range/range_example';
+
 import { ResponsiveExample }
   from './views/responsive/responsive_example';
 
@@ -400,6 +403,7 @@ const navigation = [{
     DatePickerExample,
     ExpressionExample,
     FilterGroupExample,
+    RangeControlExample,
     SearchBarExample,
   ].map(example => createExample(example)),
 },
diff --git a/src-docs/src/views/form_controls/form_controls_example.js b/src-docs/src/views/form_controls/form_controls_example.js
index 7cf3be3554e..317d3253ddb 100644
--- a/src-docs/src/views/form_controls/form_controls_example.js
+++ b/src-docs/src/views/form_controls/form_controls_example.js
@@ -25,7 +25,6 @@ import {
   EuiLink,
   EuiRadio,
   EuiRadioGroup,
-  EuiRange,
   EuiSelect,
   EuiSwitch,
   EuiTextArea,
@@ -75,10 +74,6 @@ import RadioGroup from './radio_group';
 const radioGroupSource = require('!!raw-loader!./radio_group');
 const radioGroupHtml = renderToHtml(RadioGroup);
 
-import RangeExample from './range';
-const rangeSource = require('!!raw-loader!./range');
-const rangeHtml = renderToHtml(RangeExample);
-
 import Switch from './switch';
 const switchSource = require('!!raw-loader!./switch');
 const switchHtml = renderToHtml(Switch);
@@ -250,36 +245,6 @@ export const FormControlsExample = {
       EuiRadioGroup,
     },
     demo: <RadioGroup />,
-  }, {
-    title: 'Range',
-    text: (
-      <Fragment>
-        <EuiCallOut color="warning" title="Understanding precision">
-          <p>
-            The base slider should only be used
-            when <strong>the precise value is not considered important</strong>. If
-            the precise value does matter, add the <code>showInput</code> prop or use
-            a <code>EuiFieldNumber</code> instead.
-          </p>
-        </EuiCallOut>
-        <br/>
-        <p>
-          While currently considered optional, the <code>showLabels</code> property should
-          be added to explicitly state the range to the user.
-        </p>
-      </Fragment>
-    ),
-    source: [{
-      type: GuideSectionTypes.JS,
-      code: rangeSource,
-    }, {
-      type: GuideSectionTypes.HTML,
-      code: rangeHtml,
-    }],
-    props: {
-      EuiRange,
-    },
-    demo: <RangeExample />,
   }, {
     title: 'Switch',
     source: [{
diff --git a/src-docs/src/views/range/dual_range.js b/src-docs/src/views/range/dual_range.js
new file mode 100644
index 00000000000..0d7663fef5d
--- /dev/null
+++ b/src-docs/src/views/range/dual_range.js
@@ -0,0 +1,136 @@
+import React, {
+  Component,
+  Fragment,
+} from 'react';
+
+import {
+  EuiDualRange,
+  EuiSpacer,
+  EuiFormHelpText,
+} from '../../../../src/components';
+
+import makeId from '../../../../src/components/form/form_row/make_id';
+
+export default class extends Component {
+  constructor(props) {
+    super(props);
+
+    this.levels = [
+      {
+        min: 0,
+        max: 600,
+        color: 'danger'
+      },
+      {
+        min: 600,
+        max: 2000,
+        color: 'success'
+      }
+    ];
+
+    this.state = {
+      value: [120, 480]
+    };
+  }
+
+  onChange = (value) => {
+    this.setState({
+      value
+    });
+  };
+
+  render() {
+    return (
+      <Fragment>
+
+        <EuiDualRange
+          id={makeId()}
+          min={0}
+          max={2000}
+          value={this.state.value}
+          onChange={this.onChange}
+          aria-label="Use aria labels when no actual label is in use"
+          showLabels
+          name="dualRange"
+        />
+
+        <EuiSpacer size="xl" />
+
+        <EuiDualRange
+          id={makeId()}
+          min={0}
+          max={2000}
+          value={this.state.value}
+          onChange={this.onChange}
+          disabled
+          aria-label="Use aria labels when no actual label is in use"
+          showLabels
+        />
+
+        <EuiSpacer size="xl" />
+
+        <EuiDualRange
+          id={makeId()}
+          min={0}
+          max={2000}
+          value={this.state.value}
+          onChange={this.onChange}
+          aria-label="Use aria labels when no actual label is in use"
+          showLabels
+          showInput
+          showRange
+        />
+
+        <EuiSpacer size="xl" />
+
+        <EuiDualRange
+          id={makeId()}
+          min={0}
+          max={2000}
+          step={50}
+          value={this.state.value}
+          onChange={this.onChange}
+          aria-label="Use aria labels when no actual label is in use"
+          aria-describedby="levelsHelp"
+          showLabels
+          showInput
+          compressed
+          levels={this.levels}
+        />
+        <EuiFormHelpText id="levelsHelp">Recommended levels are 600 and above.</EuiFormHelpText>
+
+        <EuiSpacer size="xl" />
+
+        <EuiDualRange
+          id={makeId()}
+          min={0}
+          max={2000}
+          step={50}
+          value={this.state.value}
+          onChange={this.onChange}
+          aria-label="Use aria labels when no actual label is in use"
+          showTicks
+          showRange
+          tickInterval={300}
+        />
+
+        <EuiSpacer size="xl" />
+
+        <EuiDualRange
+          id={makeId()}
+          min={0}
+          max={2000}
+          step={50}
+          value={this.state.value}
+          onChange={this.onChange}
+          aria-label="Use aria labels when no actual label is in use"
+          aria-describedby="levelsHelp"
+          showTicks
+          showInput
+          tickInterval={500}
+          levels={this.levels}
+        />
+      </Fragment>
+    );
+  }
+}
diff --git a/src-docs/src/views/form_controls/range.js b/src-docs/src/views/range/range.js
similarity index 66%
rename from src-docs/src/views/form_controls/range.js
rename to src-docs/src/views/range/range.js
index 9a80a1df884..8c1dc43695d 100644
--- a/src-docs/src/views/form_controls/range.js
+++ b/src-docs/src/views/range/range.js
@@ -4,7 +4,6 @@ import React, {
 } from 'react';
 
 import {
-  EuiDualRange,
   EuiRange,
   EuiSpacer,
   EuiFormHelpText,
@@ -30,8 +29,7 @@ export default class extends Component {
     ];
 
     this.state = {
-      value: '120',
-      values: [120, 180]
+      value: '120'
     };
   }
 
@@ -41,12 +39,6 @@ export default class extends Component {
     });
   };
 
-  onDualChange = (values) => {
-    this.setState({
-      values: values,
-    });
-  };
-
   render() {
     return (
       <Fragment>
@@ -62,17 +54,6 @@ export default class extends Component {
           name="firstRange"
         />
 
-        <EuiDualRange
-          id={makeId()}
-          min={100}
-          max={200}
-          value={this.state.values}
-          onChange={this.onDualChange}
-          aria-label="Use aria labels when no actual label is in use"
-          showLabels
-          name="dualRange"
-        />
-
         <EuiSpacer size="xl" />
 
         <EuiRange
@@ -100,18 +81,6 @@ export default class extends Component {
           showRange
         />
 
-        <EuiDualRange
-          id={makeId()}
-          min={100}
-          max={200}
-          value={this.state.values}
-          onChange={this.onDualChange}
-          aria-label="Use aria labels when no actual label is in use"
-          showLabels
-          showInput
-          showRange
-        />
-
         <EuiSpacer size="xl" />
 
         <EuiRange
@@ -146,19 +115,6 @@ export default class extends Component {
           tickInterval={300}
         />
 
-        <EuiDualRange
-          id={makeId()}
-          min={0}
-          max={2000}
-          step={50}
-          value={this.state.values}
-          onChange={this.onDualChange}
-          aria-label="Use aria labels when no actual label is in use"
-          showTicks
-          showRange
-          tickInterval={300}
-        />
-
         <EuiSpacer size="xl" />
 
         <EuiRange
@@ -175,21 +131,6 @@ export default class extends Component {
           tickInterval={500}
           levels={this.levels}
         />
-
-        <EuiDualRange
-          id={makeId()}
-          min={0}
-          max={2000}
-          step={50}
-          value={this.state.values}
-          onChange={this.onDualChange}
-          aria-label="Use aria labels when no actual label is in use"
-          aria-describedby="levelsHelp"
-          showTicks
-          showInput
-          tickInterval={500}
-          levels={this.levels}
-        />
       </Fragment>
     );
   }
diff --git a/src-docs/src/views/range/range_example.js b/src-docs/src/views/range/range_example.js
new file mode 100644
index 00000000000..67ac6a8e85b
--- /dev/null
+++ b/src-docs/src/views/range/range_example.js
@@ -0,0 +1,93 @@
+import React, { Fragment } from 'react';
+
+// import {
+//   Link,
+// } from 'react-router';
+
+import { renderToHtml } from '../../services';
+
+import {
+  GuideSectionTypes,
+} from '../../components';
+
+import {
+  EuiCallOut,
+  EuiDualRange,
+  EuiRange
+} from '../../../../src/components';
+
+import DualRangeExample from './dual_range';
+const dualRangeSource = require('!!raw-loader!./dual_range');
+const dualRangeHtml = renderToHtml(DualRangeExample);
+
+import RangeExample from './range';
+const rangeSource = require('!!raw-loader!./range');
+const rangeHtml = renderToHtml(RangeExample);
+
+export const RangeControlExample = {
+  title: 'Range',
+  sections: [
+    {
+      title: 'Range',
+      text: (
+        <Fragment>
+          <EuiCallOut color="warning" title="Understanding precision">
+            <p>
+              The single slider should only be used
+              when <strong>the precise value is not considered important</strong>. If
+              the precise value does matter, add the <code>showInput</code> prop or use
+              a <code>EuiFieldNumber</code> instead.
+            </p>
+          </EuiCallOut>
+          <br/>
+          <p>
+            While currently considered optional, the <code>showLabels</code> property should
+            be added to explicitly state the range to the user.
+          </p>
+        </Fragment>
+      ),
+      source: [{
+        type: GuideSectionTypes.JS,
+        code: rangeSource,
+      }, {
+        type: GuideSectionTypes.HTML,
+        code: rangeHtml,
+      }],
+      props: {
+        EuiRange,
+      },
+      demo: <RangeExample />,
+    },
+    {
+      title: 'DualRange',
+      text: (
+        <Fragment>
+          <EuiCallOut color="warning" title="Understanding precision">
+            <p>
+            The dual slider should only be used
+            when <strong>the precise value is not considered important</strong>. If
+            the precise value does matter, add the <code>showInput</code> prop or use
+            a <code>EuiFieldNumber</code> instead.
+            </p>
+          </EuiCallOut>
+          <br/>
+          <p>
+          While currently considered optional, the <code>showLabels</code> property should
+          be added to explicitly state the range to the user.
+          </p>
+        </Fragment>
+      ),
+      source: [{
+        type: GuideSectionTypes.JS,
+        code: dualRangeSource,
+      }, {
+        type: GuideSectionTypes.HTML,
+        code: dualRangeHtml,
+      }],
+      props: {
+        EuiDualRange,
+      },
+      demo: <DualRangeExample />,
+    }
+  ]
+};
diff --git a/src/components/form/range/_range_label.scss b/src/components/form/range/_range_label.scss
index 0cd3a8a1eec..c5c7ca5548c 100644
--- a/src/components/form/range/_range_label.scss
+++ b/src/components/form/range/_range_label.scss
@@ -13,6 +13,6 @@
   }
 
   &--isDisabled {
-    opacity: .25;
+    opacity: $euiRangeDisabledOpacity;
   }
 }
diff --git a/src/components/form/range/_range_track.scss b/src/components/form/range/_range_track.scss
index e613a2de664..98f9003d181 100644
--- a/src/components/form/range/_range_track.scss
+++ b/src/components/form/range/_range_track.scss
@@ -5,7 +5,7 @@
   align-self: flex-start; // Adjust vertical alignment of input based on extras
 
   &--disabled {
-    opacity: .25;
+    opacity: $euiRangeDisabledOpacity;
   }
 }
 
diff --git a/src/components/form/range/_variables.scss b/src/components/form/range/_variables.scss
index 8f66e5d2b27..ce6a5cfd8e6 100644
--- a/src/components/form/range/_variables.scss
+++ b/src/components/form/range/_variables.scss
@@ -10,3 +10,5 @@ $euiRangeTrackHeight: 2px !default;
 $euiRangeTrackBorderWidth: 0 !default;
 $euiRangeTrackBorderColor: $euiRangeTrackColor !default;
 $euiRangeTrackRadius: $euiBorderRadius !default;
+
+$euiRangeDisabledOpacity: .25;
diff --git a/src/components/form/range/dual_range.js b/src/components/form/range/dual_range.js
index 81db56623c6..1d2a4b72872 100644
--- a/src/components/form/range/dual_range.js
+++ b/src/components/form/range/dual_range.js
@@ -21,7 +21,7 @@ export class EuiDualRange extends Component {
   handleRangeSliderRefUpdate = (ref) => {
     this.rangeSliderRef = ref;
     this.setState({
-      rangeSliderRefAvailable: true
+      rangeSliderRefAvailable: !!ref
     });
   }
 
@@ -333,10 +333,17 @@ const EuiRangeThumb = ({ min, max, value, disabled, showInput, showTicks, ...res
       role="slider"
       aria-valuemin={min}
       aria-valuemax={max}
-      aria-valuenow={value}
+      aria-valuenow={Number(value)}
       aria-disabled={!!disabled}
       tabIndex={showInput ? '-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,
+};

From 90ff293668ea14ebd760809112619d7245abedaa Mon Sep 17 00:00:00 2001
From: Greg Thompson <thompson.glowe@gmail.com>
Date: Mon, 28 Jan 2019 12:05:28 -0600
Subject: [PATCH 09/27] remove thumb focus when disabled

---
 src/components/form/range/dual_range.js  | 4 ++--
 src/components/form/range/range_label.js | 5 ++++-
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/components/form/range/dual_range.js b/src/components/form/range/dual_range.js
index 1d2a4b72872..ec7278037b6 100644
--- a/src/components/form/range/dual_range.js
+++ b/src/components/form/range/dual_range.js
@@ -236,7 +236,7 @@ export class EuiDualRange extends Component {
             />
           )}
         </EuiRangeTrack>
-        {showLabels && <EuiRangeLabel side="max" disabled={disabled}>{max}</EuiRangeLabel>}
+        {showLabels && <EuiRangeLabel disabled={disabled}>{max}</EuiRangeLabel>}
         {showInput && (
           <EuiRangeInput
             min={Number(this.lowerValue)}
@@ -335,7 +335,7 @@ const EuiRangeThumb = ({ min, max, value, disabled, showInput, showTicks, ...res
       aria-valuemax={max}
       aria-valuenow={Number(value)}
       aria-disabled={!!disabled}
-      tabIndex={showInput ? '-1' : '0'}
+      tabIndex={(showInput || !!disabled) ? '-1' : '0'}
       {...rest}
     />
   );
diff --git a/src/components/form/range/range_label.js b/src/components/form/range/range_label.js
index 08191c70f60..132f4a51536 100644
--- a/src/components/form/range/range_label.js
+++ b/src/components/form/range/range_label.js
@@ -14,5 +14,8 @@ export const EuiRangeLabel = ({ children, disabled, side }) => {
 };
 
 EuiRangeLabel.propTypes = {
-  side: PropTypes.string.isRequired
+  side: PropTypes.oneOf(['min', 'max'])
+};
+EuiRangeLabel.defaultProps = {
+  side: 'max'
 };

From e3672eacafa48d8e4beb6b7917142908337e1c6c Mon Sep 17 00:00:00 2001
From: Greg Thompson <thompson.glowe@gmail.com>
Date: Mon, 28 Jan 2019 13:07:05 -0600
Subject: [PATCH 10/27] update docs to share intro

---
 src-docs/src/views/range/range_example.js | 58 ++++++++---------------
 1 file changed, 19 insertions(+), 39 deletions(-)

diff --git a/src-docs/src/views/range/range_example.js b/src-docs/src/views/range/range_example.js
index 67ac6a8e85b..39dc4f6d854 100644
--- a/src-docs/src/views/range/range_example.js
+++ b/src-docs/src/views/range/range_example.js
@@ -1,9 +1,5 @@
 import React, { Fragment } from 'react';
 
-// import {
-//   Link,
-// } from 'react-router';
-
 import { renderToHtml } from '../../services';
 
 import {
@@ -13,7 +9,8 @@ import {
 import {
   EuiCallOut,
   EuiDualRange,
-  EuiRange
+  EuiRange,
+  EuiSpacer
 } from '../../../../src/components';
 
 import DualRangeExample from './dual_range';
@@ -26,26 +23,26 @@ const rangeHtml = renderToHtml(RangeExample);
 
 export const RangeControlExample = {
   title: 'Range',
+  intro: (
+    <Fragment>
+      <EuiCallOut color="warning" title="Understanding precision">
+        <p>
+        Range sliders should only be used
+        when <strong>the precise value is not considered important</strong>. If
+        the precise value does matter, add the <code>showInput</code> prop or use
+        a <code>EuiFieldNumber</code> instead.
+        </p>
+        <p>
+        While currently considered optional, the <code>showLabels</code> property should
+        be added to explicitly state the range to the user.
+        </p>
+      </EuiCallOut>
+      <EuiSpacer size="l" />
+    </Fragment>
+  ),
   sections: [
     {
       title: 'Range',
-      text: (
-        <Fragment>
-          <EuiCallOut color="warning" title="Understanding precision">
-            <p>
-              The single slider should only be used
-              when <strong>the precise value is not considered important</strong>. If
-              the precise value does matter, add the <code>showInput</code> prop or use
-              a <code>EuiFieldNumber</code> instead.
-            </p>
-          </EuiCallOut>
-          <br/>
-          <p>
-            While currently considered optional, the <code>showLabels</code> property should
-            be added to explicitly state the range to the user.
-          </p>
-        </Fragment>
-      ),
       source: [{
         type: GuideSectionTypes.JS,
         code: rangeSource,
@@ -60,23 +57,6 @@ export const RangeControlExample = {
     },
     {
       title: 'DualRange',
-      text: (
-        <Fragment>
-          <EuiCallOut color="warning" title="Understanding precision">
-            <p>
-            The dual slider should only be used
-            when <strong>the precise value is not considered important</strong>. If
-            the precise value does matter, add the <code>showInput</code> prop or use
-            a <code>EuiFieldNumber</code> instead.
-            </p>
-          </EuiCallOut>
-          <br/>
-          <p>
-          While currently considered optional, the <code>showLabels</code> property should
-          be added to explicitly state the range to the user.
-          </p>
-        </Fragment>
-      ),
       source: [{
         type: GuideSectionTypes.JS,
         code: dualRangeSource,

From e7ade55f45e2838ad46a166750508eb86d1c5948 Mon Sep 17 00:00:00 2001
From: Greg Thompson <thompson.glowe@gmail.com>
Date: Mon, 28 Jan 2019 14:56:06 -0600
Subject: [PATCH 11/27] default showRange to true for EuiDualRange; prop clean
 up

---
 .../__snapshots__/dual_range.test.js.snap     | 64 +++++++++++++++++++
 src/components/form/range/dual_range.js       | 13 ++--
 src/components/form/range/range.js            |  1 +
 3 files changed, 71 insertions(+), 7 deletions(-)

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 13f511d25bf..dd3739123c9 100644
--- a/src/components/form/range/__snapshots__/dual_range.test.js.snap
+++ b/src/components/form/range/__snapshots__/dual_range.test.js.snap
@@ -15,6 +15,14 @@ exports[`EuiDualRange allows value prop to accept numbers 1`] = `
       type="range"
       value="0,8"
     />
+    <div
+      class="euiRangeHighlight"
+    >
+      <div
+        class="euiRangeHighlight__progress"
+        style="margin-left:-1.0101010101010102%;width:8.080808080808081%"
+      />
+    </div>
   </div>
 </div>
 `;
@@ -38,6 +46,14 @@ exports[`EuiDualRange is rendered 1`] = `
       type="range"
       value="0,8"
     />
+    <div
+      class="euiRangeHighlight"
+    >
+      <div
+        class="euiRangeHighlight__progress"
+        style="margin-left:-11.11111111111111%;width:88.88888888888889%"
+      />
+    </div>
   </div>
 </div>
 `;
@@ -56,6 +72,14 @@ exports[`EuiDualRange props compressed should render 1`] = `
       tabindex="-1"
       type="range"
     />
+    <div
+      class="euiRangeHighlight"
+    >
+      <div
+        class="euiRangeHighlight__progress"
+        style="margin-left:0%;width:100%"
+      />
+    </div>
   </div>
 </div>
 `;
@@ -74,6 +98,14 @@ exports[`EuiDualRange props fullWidth should render 1`] = `
       tabindex="-1"
       type="range"
     />
+    <div
+      class="euiRangeHighlight"
+    >
+      <div
+        class="euiRangeHighlight__progress"
+        style="margin-left:0%;width:100%"
+      />
+    </div>
   </div>
 </div>
 `;
@@ -114,6 +146,14 @@ exports[`EuiDualRange props inputs should render 1`] = `
       type="range"
       value="0,8"
     />
+    <div
+      class="euiRangeHighlight"
+    >
+      <div
+        class="euiRangeHighlight__progress"
+        style="margin-left:-11.11111111111111%;width:88.88888888888889%"
+      />
+    </div>
   </div>
   <div
     class="euiFormControlLayout"
@@ -154,6 +194,14 @@ exports[`EuiDualRange props labels should render 1`] = `
       tabindex="-1"
       type="range"
     />
+    <div
+      class="euiRangeHighlight"
+    >
+      <div
+        class="euiRangeHighlight__progress"
+        style="margin-left:0%;width:100%"
+      />
+    </div>
   </div>
   <label
     class="euiRangeLabel euiRangeLabel--max"
@@ -177,6 +225,14 @@ exports[`EuiDualRange props levels should render 1`] = `
       tabindex="-1"
       type="range"
     />
+    <div
+      class="euiRangeHighlight"
+    >
+      <div
+        class="euiRangeHighlight__progress"
+        style="margin-left:0%;width:100%"
+      />
+    </div>
     <div
       class="euiRangeLevels"
     >
@@ -233,6 +289,14 @@ exports[`EuiDualRange props ticks should render 1`] = `
       tabindex="-1"
       type="range"
     />
+    <div
+      class="euiRangeHighlight euiRangeHighlight--hasTicks"
+    >
+      <div
+        class="euiRangeHighlight__progress"
+        style="margin-left:0%;width:100%"
+      />
+    </div>
     <div
       class="euiRangeTicks"
       style="margin:0 -8.403361344537815%;left:0;right:0"
diff --git a/src/components/form/range/dual_range.js b/src/components/form/range/dual_range.js
index ec7278037b6..a9fcbff3f33 100644
--- a/src/components/form/range/dual_range.js
+++ b/src/components/form/range/dual_range.js
@@ -140,7 +140,6 @@ export class EuiDualRange extends Component {
       levels,
       onChange, // eslint-disable-line no-unused-vars
       showRange,
-      valueAppend, // eslint-disable-line no-unused-vars
       value,
       style,
       ...rest
@@ -260,6 +259,9 @@ EuiDualRange.propTypes = {
   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,
@@ -268,7 +270,7 @@ EuiDualRange.propTypes = {
    */
   showLabels: PropTypes.bool,
   /**
-   * Displays an extra input control for direct manipulation
+   * Displays a input controls for direct manipulation
    */
   showInput: PropTypes.bool,
   /**
@@ -300,13 +302,9 @@ EuiDualRange.propTypes = {
     }),
   ),
   /**
-   * Shows a thick line from min to value
+   * Shows a thick line from lower value to upper value
    */
   showRange: PropTypes.bool,
-  /**
-   * Shows a tooltip styled value
-   */
-  valueAppend: PropTypes.node,
 };
 
 EuiDualRange.defaultProps = {
@@ -316,6 +314,7 @@ EuiDualRange.defaultProps = {
   compressed: false,
   showLabels: false,
   showInput: false,
+  showRange: true,
   showTicks: false,
   levels: [],
 };
diff --git a/src/components/form/range/range.js b/src/components/form/range/range.js
index 60914918497..38671cd9b91 100644
--- a/src/components/form/range/range.js
+++ b/src/components/form/range/range.js
@@ -173,6 +173,7 @@ EuiRange.defaultProps = {
   compressed: false,
   showLabels: false,
   showInput: false,
+  showRange: false,
   showTicks: false,
   showValue: false,
   levels: [],

From 0f162bb6905d5dad87c3a253da74faa434fe80c6 Mon Sep 17 00:00:00 2001
From: Greg Thompson <thompson.glowe@gmail.com>
Date: Tue, 29 Jan 2019 09:33:14 -0600
Subject: [PATCH 12/27] class-based focus style when input is not focusable

---
 src/components/form/range/_range_slider.scss | 37 ++++++++++----------
 src/components/form/range/dual_range.js      |  1 +
 src/components/form/range/range_slider.js    |  5 ++-
 3 files changed, 24 insertions(+), 19 deletions(-)

diff --git a/src/components/form/range/_range_slider.scss b/src/components/form/range/_range_slider.scss
index 026a2440d34..e35714484f9 100644
--- a/src/components/form/range/_range_slider.scss
+++ b/src/components/form/range/_range_slider.scss
@@ -34,7 +34,25 @@
     }
   }
 
-  &:focus {
+  @include euiRangeThumbPerBrowser {
+    @include euiCustomControl($type: 'round');
+
+    @include euiRangeThumbStyle;
+  }
+
+  @include euiRangeTrackPerBrowser {
+    @include euiRangeTrackSize;
+
+    background: $euiRangeTrackColor;
+    border: $euiRangeTrackBorderWidth solid $euiRangeTrackBorderColor;
+    border-radius: $euiRangeTrackRadius;
+
+    background-color: transparentize($euiRangeTrackColor, .6);
+    border-color: transparentize($euiRangeTrackBorderColor, .6);
+  }
+
+  &:focus,
+  &--hasFocus {
     @include euiRangeThumbPerBrowser {
       @include euiCustomControlFocused;
     }
@@ -61,23 +79,6 @@
     }
   }
 
-  @include euiRangeThumbPerBrowser {
-    @include euiCustomControl($type: 'round');
-
-    @include euiRangeThumbStyle;
-  }
-
-  @include euiRangeTrackPerBrowser {
-    @include euiRangeTrackSize;
-
-    background: $euiRangeTrackColor;
-    border: $euiRangeTrackBorderWidth solid $euiRangeTrackBorderColor;
-    border-radius: $euiRangeTrackRadius;
-
-    background-color: transparentize($euiRangeTrackColor, .6);
-    border-color: transparentize($euiRangeTrackBorderColor, .6);
-  }
-
   // Resets
 
   // Disable linter for these very unique vendor controls
diff --git a/src/components/form/range/dual_range.js b/src/components/form/range/dual_range.js
index a9fcbff3f33..b9d15a2af7c 100644
--- a/src/components/form/range/dual_range.js
+++ b/src/components/form/range/dual_range.js
@@ -191,6 +191,7 @@ export class EuiDualRange extends Component {
             onChange={this.handleSliderChange}
             style={style}
             showTicks={showTicks}
+            hasFocus={this.state.hasFocus}
             tabIndex={'-1'}
             {...rest}
           />
diff --git a/src/components/form/range/range_slider.js b/src/components/form/range/range_slider.js
index 5c335a7e951..cba60615ec7 100644
--- a/src/components/form/range/range_slider.js
+++ b/src/components/form/range/range_slider.js
@@ -15,10 +15,12 @@ export const EuiRangeSlider = React.forwardRef(({
   value,
   style,
   showTicks,
+  hasFocus,
   ...rest
 }, ref) => {
   const classes = classNames('euiRangeSlider', {
-    'euiRangeSlider--hasTicks': showTicks
+    'euiRangeSlider--hasTicks': showTicks,
+    'euiRangeSlider--hasFocus': hasFocus
   }, className);
   return (
     <input
@@ -53,4 +55,5 @@ EuiRangeSlider.propTypes = {
     PropTypes.string,
     PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string]))
   ]),
+  hasFocus: PropTypes.bool
 };

From b4e3dc2475f86c6d0b34e08f6de7e8564a61c3eb Mon Sep 17 00:00:00 2001
From: Greg Thompson <thompson.glowe@gmail.com>
Date: Tue, 29 Jan 2019 09:36:35 -0600
Subject: [PATCH 13/27] size input based on max number of characters via digits
 prop

---
 .../form/range/__snapshots__/dual_range.test.js.snap   |  4 ++--
 .../form/range/__snapshots__/range.test.js.snap        |  2 +-
 src/components/form/range/dual_range.js                |  2 ++
 src/components/form/range/range_input.js               | 10 ++++++++--
 4 files changed, 13 insertions(+), 5 deletions(-)

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 dd3739123c9..3ee3b7a43de 100644
--- a/src/components/form/range/__snapshots__/dual_range.test.js.snap
+++ b/src/components/form/range/__snapshots__/dual_range.test.js.snap
@@ -125,7 +125,7 @@ exports[`EuiDualRange props inputs should render 1`] = `
         max="8"
         min="1"
         name="name-minValue"
-        style="max-width:3em"
+        style="width:4em"
         type="number"
         value="0"
       />
@@ -166,7 +166,7 @@ exports[`EuiDualRange props inputs should render 1`] = `
         max="10"
         min="0"
         name="name-maxValue"
-        style="max-width:4em"
+        style="width:4em"
         type="number"
         value="8"
       />
diff --git a/src/components/form/range/__snapshots__/range.test.js.snap b/src/components/form/range/__snapshots__/range.test.js.snap
index 3f8922888c6..555d319b121 100644
--- a/src/components/form/range/__snapshots__/range.test.js.snap
+++ b/src/components/form/range/__snapshots__/range.test.js.snap
@@ -100,7 +100,7 @@ exports[`EuiRange props extra input should render 1`] = `
         max="10"
         min="1"
         name="name"
-        style="max-width:4em"
+        style="width:4em"
         type="number"
         value="8"
       />
diff --git a/src/components/form/range/dual_range.js b/src/components/form/range/dual_range.js
index b9d15a2af7c..7d85ffe429c 100644
--- a/src/components/form/range/dual_range.js
+++ b/src/components/form/range/dual_range.js
@@ -157,6 +157,7 @@ export class EuiDualRange extends Component {
             side="min"
             min={min}
             max={Number(this.upperValue)}
+            digits={String(max).length}
             step={step}
             value={this.lowerValue}
             disabled={disabled}
@@ -241,6 +242,7 @@ export class EuiDualRange extends Component {
           <EuiRangeInput
             min={Number(this.lowerValue)}
             max={max}
+            digits={String(max).length}
             step={step}
             value={this.upperValue}
             disabled={disabled}
diff --git a/src/components/form/range/range_input.js b/src/components/form/range/range_input.js
index bfd96cbcee4..0072bb882be 100644
--- a/src/components/form/range/range_input.js
+++ b/src/components/form/range/range_input.js
@@ -13,10 +13,15 @@ export const EuiRangeInput = ({
   onChange,
   name,
   side,
+  digits,
   ...rest
 }) => {
 
-  const maxWidthStyle = { maxWidth: `${Math.max(String(min).length, String(max).length) + 2}em` };
+  // Chrome will properly size the input based on the max value, but FF & IE do not.
+  // Calculate the width of the input based on highest number of characters.
+  // Add 2 to accomodate for input stepper
+  const digitTolerance = !!digits ? digits : Math.max(String(min).length, String(max).length);
+  const widthStyle = { width: `${digitTolerance + 2}em` };
 
   return (
     <EuiFieldNumber
@@ -29,7 +34,7 @@ export const EuiRangeInput = ({
       disabled={disabled}
       compressed={compressed}
       onChange={onChange}
-      style={maxWidthStyle}
+      style={widthStyle}
       {...rest}
     />
   );
@@ -43,6 +48,7 @@ EuiRangeInput.propTypes = {
   compressed: PropTypes.bool,
   onChange: PropTypes.func,
   name: PropTypes.string,
+  digits: PropTypes.number,
   side: PropTypes.oneOf(['min', 'max'])
 };
 EuiRangeInput.defaultProps = {

From 2c1954a349dffa331093831f3b5f5879a758fc7c Mon Sep 17 00:00:00 2001
From: Greg Thompson <thompson.glowe@gmail.com>
Date: Tue, 29 Jan 2019 11:41:08 -0600
Subject: [PATCH 14/27] pass aria attrs through to focusable, changeable
 elements

---
 .../form/range/__snapshots__/dual_range.test.js.snap  | 11 +++++++++++
 src/components/form/range/dual_range.js               |  9 +++++++++
 2 files changed, 20 insertions(+)

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 3ee3b7a43de..9e9300b89de 100644
--- a/src/components/form/range/__snapshots__/dual_range.test.js.snap
+++ b/src/components/form/range/__snapshots__/dual_range.test.js.snap
@@ -8,6 +8,7 @@ exports[`EuiDualRange allows value prop to accept numbers 1`] = `
     class="euiRangeTrack"
   >
     <input
+      aria-hidden="true"
       class="euiRangeSlider euiDualRange__slider"
       max="100"
       min="1"
@@ -35,6 +36,7 @@ exports[`EuiDualRange is rendered 1`] = `
     class="euiRangeTrack"
   >
     <input
+      aria-hidden="true"
       aria-label="aria-label"
       class="euiRangeSlider euiDualRange__slider testClass1 testClass2"
       data-test-subj="test subject string"
@@ -66,6 +68,7 @@ exports[`EuiDualRange props compressed should render 1`] = `
     class="euiRangeTrack"
   >
     <input
+      aria-hidden="true"
       class="euiRangeSlider euiDualRange__slider"
       max="100"
       min="1"
@@ -92,6 +95,7 @@ exports[`EuiDualRange props fullWidth should render 1`] = `
     class="euiRangeTrack"
   >
     <input
+      aria-hidden="true"
       class="euiRangeSlider euiDualRange__slider"
       max="100"
       min="1"
@@ -121,6 +125,7 @@ exports[`EuiDualRange props inputs should render 1`] = `
       class="euiFormControlLayout__childrenWrapper"
     >
       <input
+        aria-label="aria-label"
         class="euiFieldNumber euiRangeInput euiRangeInput--min"
         max="8"
         min="1"
@@ -135,6 +140,7 @@ exports[`EuiDualRange props inputs should render 1`] = `
     class="euiRangeTrack"
   >
     <input
+      aria-hidden="true"
       aria-label="aria-label"
       class="euiRangeSlider euiDualRange__slider testClass1 testClass2"
       data-test-subj="test subject string"
@@ -162,6 +168,7 @@ exports[`EuiDualRange props inputs should render 1`] = `
       class="euiFormControlLayout__childrenWrapper"
     >
       <input
+        aria-label="aria-label"
         class="euiFieldNumber euiRangeInput euiRangeInput--max"
         max="10"
         min="0"
@@ -188,6 +195,7 @@ exports[`EuiDualRange props labels should render 1`] = `
     class="euiRangeTrack"
   >
     <input
+      aria-hidden="true"
       class="euiRangeSlider euiDualRange__slider"
       max="100"
       min="1"
@@ -219,6 +227,7 @@ exports[`EuiDualRange props levels should render 1`] = `
     class="euiRangeTrack"
   >
     <input
+      aria-hidden="true"
       class="euiRangeSlider euiDualRange__slider"
       max="100"
       min="1"
@@ -257,6 +266,7 @@ exports[`EuiDualRange props range should render 1`] = `
     class="euiRangeTrack"
   >
     <input
+      aria-hidden="true"
       class="euiRangeSlider euiDualRange__slider"
       max="100"
       min="1"
@@ -283,6 +293,7 @@ exports[`EuiDualRange props ticks should render 1`] = `
     class="euiRangeTrack"
   >
     <input
+      aria-hidden="true"
       class="euiRangeSlider euiRangeSlider--hasTicks euiDualRange__slider"
       max="100"
       min="1"
diff --git a/src/components/form/range/dual_range.js b/src/components/form/range/dual_range.js
index 7d85ffe429c..bbaf5f74d8f 100644
--- a/src/components/form/range/dual_range.js
+++ b/src/components/form/range/dual_range.js
@@ -164,6 +164,8 @@ export class EuiDualRange extends Component {
             compressed={compressed}
             onChange={this.handleLowerInputChange}
             name={`${name}-minValue`}
+            aria-describedby={this.props['aria-describedby']}
+            aria-label={this.props['aria-label']}
           />
         )}
         {showLabels && <EuiRangeLabel side="min" disabled={disabled}>{min}</EuiRangeLabel>}
@@ -193,6 +195,7 @@ export class EuiDualRange extends Component {
             style={style}
             showTicks={showTicks}
             hasFocus={this.state.hasFocus}
+            aria-hidden={true}
             tabIndex={'-1'}
             {...rest}
           />
@@ -210,6 +213,8 @@ export class EuiDualRange extends Component {
                 onFocus={() => this.toggleHasFocus(true)}
                 onBlur={() => this.toggleHasFocus(false)}
                 style={this.calculateThumbPositionStyle(this.lowerValue)}
+                aria-describedby={this.props['aria-describedby']}
+                aria-label={this.props['aria-label']}
               />
               <EuiRangeThumb
                 min={Number(this.lowerValue)}
@@ -222,6 +227,8 @@ export class EuiDualRange extends Component {
                 onFocus={() => this.toggleHasFocus(true)}
                 onBlur={() => this.toggleHasFocus(false)}
                 style={this.calculateThumbPositionStyle(this.upperValue)}
+                aria-describedby={this.props['aria-describedby']}
+                aria-label={this.props['aria-label']}
               />
             </React.Fragment>
           )}
@@ -249,6 +256,8 @@ export class EuiDualRange extends Component {
             compressed={compressed}
             onChange={this.handleUpperInputChange}
             name={`${name}-maxValue`}
+            aria-describedby={this.props['aria-describedby']}
+            aria-label={this.props['aria-label']}
           />
         )}
       </EuiRangeWrapper>

From a404ee7adab102650b605c55b20e8afd38cbf8f4 Mon Sep 17 00:00:00 2001
From: Greg Thompson <thompson.glowe@gmail.com>
Date: Wed, 30 Jan 2019 10:57:48 -0600
Subject: [PATCH 15/27] number service: isWithinRange

---
 src/services/number/index.ts        |  1 +
 src/services/number/number.test.tsx | 19 +++++++++++++++++++
 src/services/number/number.ts       | 15 +++++++++++++++
 3 files changed, 35 insertions(+)
 create mode 100644 src/services/number/index.ts
 create mode 100644 src/services/number/number.test.tsx
 create mode 100644 src/services/number/number.ts

diff --git a/src/services/number/index.ts b/src/services/number/index.ts
new file mode 100644
index 00000000000..3238b292cb6
--- /dev/null
+++ b/src/services/number/index.ts
@@ -0,0 +1 @@
+export * from './number';
diff --git a/src/services/number/number.test.tsx b/src/services/number/number.test.tsx
new file mode 100644
index 00000000000..5d764e561a3
--- /dev/null
+++ b/src/services/number/number.test.tsx
@@ -0,0 +1,19 @@
+import { isWithinRange } from './number';
+
+describe('numbers', () => {
+
+  test('isWithinRange', () => {
+    expect(isWithinRange(0, 100, 50)).toBe(true);
+    expect(isWithinRange('0', 100, 50)).toBe(true);
+    expect(isWithinRange(0, '100', 50)).toBe(true);
+    expect(isWithinRange(0, 100, '50')).toBe(true);
+    expect(isWithinRange(0, 100, 0)).toBe(true);
+    expect(isWithinRange(0, 100, 100)).toBe(true);
+
+    expect(isWithinRange(0, 100, 101)).toBe(false);
+    expect(isWithinRange(10, 100, 0)).toBe(false);
+    expect(isWithinRange(0, 100, '')).toBe(false);
+    expect(isWithinRange(0, 100, null)).toBe(false);
+    expect(isWithinRange(0, 100)).toBe(false);
+  });
+});
diff --git a/src/services/number/number.ts b/src/services/number/number.ts
new file mode 100644
index 00000000000..32a0043ea86
--- /dev/null
+++ b/src/services/number/number.ts
@@ -0,0 +1,15 @@
+import { isNil } from '../predicate';
+
+export const isWithinRange = (min?: any, max?: any, value?: any) => {
+  if (isNil(value) || isNaN(value) || value === '') {
+    return false;
+  }
+
+  min = Number(min);
+  max = Number(max);
+  value = Number(value);
+  if (value >= min && value <= max) {
+    return true;
+  }
+  return false;
+};

From a742311c863667ee29e9e06ece56f136dc1ef061 Mon Sep 17 00:00:00 2001
From: Greg Thompson <thompson.glowe@gmail.com>
Date: Wed, 30 Jan 2019 10:59:26 -0600
Subject: [PATCH 16/27] account for invalid states; pass isValid to parent via
 onChange

---
 .../__snapshots__/dual_range.test.js.snap     |  19 +-
 .../range/__snapshots__/range.test.js.snap    |   3 +-
 src/components/form/range/dual_range.js       |  10 +-
 src/components/form/range/dual_range.test.js  |   8 +-
 src/components/form/range/range.js            | 189 ++++++++++--------
 src/components/form/range/range.test.js       |   2 +-
 6 files changed, 127 insertions(+), 104 deletions(-)

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 9e9300b89de..2c780426658 100644
--- a/src/components/form/range/__snapshots__/dual_range.test.js.snap
+++ b/src/components/form/range/__snapshots__/dual_range.test.js.snap
@@ -14,14 +14,14 @@ exports[`EuiDualRange allows value prop to accept numbers 1`] = `
       min="1"
       tabindex="-1"
       type="range"
-      value="0,8"
+      value="1,8"
     />
     <div
       class="euiRangeHighlight"
     >
       <div
         class="euiRangeHighlight__progress"
-        style="margin-left:-1.0101010101010102%;width:8.080808080808081%"
+        style="margin-left:0%;width:7.07070707070707%"
       />
     </div>
   </div>
@@ -46,14 +46,14 @@ exports[`EuiDualRange is rendered 1`] = `
       name="name"
       tabindex="-1"
       type="range"
-      value="0,8"
+      value="1,8"
     />
     <div
       class="euiRangeHighlight"
     >
       <div
         class="euiRangeHighlight__progress"
-        style="margin-left:-11.11111111111111%;width:88.88888888888889%"
+        style="margin-left:0%;width:77.77777777777779%"
       />
     </div>
   </div>
@@ -132,7 +132,7 @@ exports[`EuiDualRange props inputs should render 1`] = `
         name="name-minValue"
         style="width:4em"
         type="number"
-        value="0"
+        value="1"
       />
     </div>
   </div>
@@ -150,14 +150,14 @@ exports[`EuiDualRange props inputs should render 1`] = `
       name="name"
       tabindex="-1"
       type="range"
-      value="0,8"
+      value="1,8"
     />
     <div
       class="euiRangeHighlight"
     >
       <div
         class="euiRangeHighlight__progress"
-        style="margin-left:-11.11111111111111%;width:88.88888888888889%"
+        style="margin-left:0%;width:77.77777777777779%"
       />
     </div>
   </div>
@@ -171,7 +171,7 @@ exports[`EuiDualRange props inputs should render 1`] = `
         aria-label="aria-label"
         class="euiFieldNumber euiRangeInput euiRangeInput--max"
         max="10"
-        min="0"
+        min="1"
         name="name-maxValue"
         style="width:4em"
         type="number"
@@ -272,13 +272,14 @@ exports[`EuiDualRange props range should render 1`] = `
       min="1"
       tabindex="-1"
       type="range"
+      value="1,8"
     />
     <div
       class="euiRangeHighlight"
     >
       <div
         class="euiRangeHighlight__progress"
-        style="margin-left:0%;width:100%"
+        style="margin-left:0%;width:7.07070707070707%"
       />
     </div>
   </div>
diff --git a/src/components/form/range/__snapshots__/range.test.js.snap b/src/components/form/range/__snapshots__/range.test.js.snap
index 555d319b121..2c23ede4230 100644
--- a/src/components/form/range/__snapshots__/range.test.js.snap
+++ b/src/components/form/range/__snapshots__/range.test.js.snap
@@ -194,13 +194,14 @@ exports[`EuiRange props range should render 1`] = `
       max="100"
       min="1"
       type="range"
+      value="8"
     />
     <div
       class="euiRangeHighlight"
     >
       <div
         class="euiRangeHighlight__progress"
-        style="margin-left:0%;width:NaN%"
+        style="margin-left:0%;width:7.07070707070707%"
       />
     </div>
   </div>
diff --git a/src/components/form/range/dual_range.js b/src/components/form/range/dual_range.js
index bbaf5f74d8f..9ec71ccced0 100644
--- a/src/components/form/range/dual_range.js
+++ b/src/components/form/range/dual_range.js
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
 import { keyCodes } from '../../../services';
+import { isWithinRange } from '../../../services/number';
 
 import { EuiRangeHighlight } from './range_highlight';
 import { EuiRangeInput } from './range_input';
@@ -31,6 +32,10 @@ export class EuiDualRange extends Component {
   get upperValue() {
     return this.props.value ? this.props.value[1] : this.props.max;
   }
+  get isValid() {
+    return isWithinRange(this.props.min, this.upperValue, this.lowerValue)
+      && isWithinRange(this.lowerValue, this.props.max, this.upperValue);
+  }
 
   _determineThumbMovement = (newVal, e) => {
     // Determine closer thumb
@@ -45,7 +50,8 @@ export class EuiDualRange extends Component {
   }
 
   _handleOnChange = (lower, upper, e) => {
-    this.props.onChange([lower, upper], e);
+    const isValid = isWithinRange(this.props.min, upper, lower) && isWithinRange(lower, this.props.max, upper);
+    this.props.onChange([lower, upper], isValid, e);
   }
 
   handleSliderChange = (e) => {
@@ -233,7 +239,7 @@ export class EuiDualRange extends Component {
             </React.Fragment>
           )}
 
-          {showRange && (
+          {(showRange && this.isValid) && (
             <EuiRangeHighlight
               hasFocus={this.state.hasFocus}
               showTicks={showTicks}
diff --git a/src/components/form/range/dual_range.test.js b/src/components/form/range/dual_range.test.js
index 63e887a71b7..61c6e13a030 100644
--- a/src/components/form/range/dual_range.test.js
+++ b/src/components/form/range/dual_range.test.js
@@ -12,7 +12,7 @@ describe('EuiDualRange', () => {
         id="id"
         min={1}
         max={10}
-        value={['0', '8']}
+        value={['1', '8']}
         onChange={() => {}}
         {...requiredProps}
       />
@@ -61,7 +61,7 @@ describe('EuiDualRange', () => {
 
     test('range should render', () => {
       const component = render(
-        <EuiDualRange showRange />
+        <EuiDualRange showRange value={[1, 8]} />
       );
 
       expect(component)
@@ -75,7 +75,7 @@ describe('EuiDualRange', () => {
           id="id"
           min={1}
           max={10}
-          value={['0', '8']}
+          value={['1', '8']}
           onChange={() => {}}
           showInput
           {...requiredProps}
@@ -112,7 +112,7 @@ describe('EuiDualRange', () => {
   test('allows value prop to accept numbers', () => {
     const component = render(
       <EuiDualRange
-        value={[0, 8]}
+        value={[1, 8]}
         onChange={() => {}}
       />
     );
diff --git a/src/components/form/range/range.js b/src/components/form/range/range.js
index 38671cd9b91..4b46650edde 100644
--- a/src/components/form/range/range.js
+++ b/src/components/form/range/range.js
@@ -1,6 +1,8 @@
-import React from 'react';
+import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 
+import { isWithinRange } from '../../../services/number';
+
 import { EuiRangeHighlight } from './range_highlight';
 import { EuiRangeInput } from './range_input';
 import { EuiRangeLabel } from './range_label';
@@ -9,103 +11,116 @@ import { EuiRangeTooltip } from './range_tooltip';
 import { EuiRangeTrack, LEVEL_COLORS } from './range_track';
 import { EuiRangeWrapper } from './range_wrapper';
 
-export const EuiRange = ({
-  className,
-  compressed,
-  disabled,
-  fullWidth,
-  id,
-  max,
-  min,
-  name,
-  step,
-  showLabels,
-  showInput,
-  showTicks,
-  tickInterval,
-  ticks, // eslint-disable-line no-unused-vars
-  levels,
-  showRange,
-  showValue,
-  valueAppend, // eslint-disable-line no-unused-vars
-  onChange,
-  value,
-  style,
-  tabIndex,
-  ...rest
-}) => {
+export class EuiRange extends Component {
+  handleOnChange = (e) => {
+    const isValid = isWithinRange(this.props.min, this.props.max, e.target.value);
+    this.props.onChange(e, isValid);
+  }
+
+  get isValid() {
+    return isWithinRange(this.props.min, this.props.max, this.props.value);
+  }
+
+  render() {
+
+    const {
+      className,
+      compressed,
+      disabled,
+      fullWidth,
+      id,
+      max,
+      min,
+      name,
+      step,
+      showLabels,
+      showInput,
+      showTicks,
+      tickInterval,
+      ticks, // eslint-disable-line no-unused-vars
+      levels,
+      showRange,
+      showValue,
+      valueAppend, // eslint-disable-line no-unused-vars
+      onChange, // eslint-disable-line no-unused-vars
+      value,
+      style,
+      tabIndex,
+      ...rest
+    } = this.props;
 
-  return (
-    <EuiRangeWrapper
-      className="euiRange"
-      fullWidth={fullWidth}
-    >
-      {showLabels && <EuiRangeLabel side="min" disabled={disabled}>{min}</EuiRangeLabel>}
-      <EuiRangeTrack
-        disabled={disabled}
-        max={max}
-        min={min}
-        step={step}
-        showTicks={showTicks}
-        tickInterval={tickInterval}
-        ticks={ticks}
-        levels={levels}
-        onChange={onChange}
-        value={value}
+    return (
+      <EuiRangeWrapper
+        className="euiRange"
+        fullWidth={fullWidth}
       >
-        <EuiRangeSlider
-          id={id}
-          name={name}
-          className={className}
-          min={min}
+        {showLabels && <EuiRangeLabel side="min" disabled={disabled}>{min}</EuiRangeLabel>}
+        <EuiRangeTrack
+          disabled={disabled}
           max={max}
+          min={min}
           step={step}
-          value={value}
-          disabled={disabled}
-          onChange={onChange}
-          style={style}
           showTicks={showTicks}
-          tabIndex={showInput ? '-1' : (tabIndex || null)}
-          {...rest}
-        />
-
-        {showValue && (
-          <EuiRangeTooltip
-            value={value}
-            max={max}
-            min={min}
+          tickInterval={tickInterval}
+          ticks={ticks}
+          levels={levels}
+          onChange={this.handleOnChange}
+          value={value}
+        >
+          <EuiRangeSlider
+            id={id}
             name={name}
+            className={className}
+            min={min}
+            max={max}
+            step={step}
+            value={value}
+            disabled={disabled}
+            onChange={this.handleOnChange}
+            style={style}
             showTicks={showTicks}
+            tabIndex={showInput ? '-1' : (tabIndex || null)}
+            {...rest}
           />
-        )}
 
-        {showRange && (
-          <EuiRangeHighlight
-            showTicks={showTicks}
-            min={Number(min)}
-            max={Number(max)}
-            lowerValue={Number(min)}
-            upperValue={Number(value)}
+          {(showValue && !!String(value).length) && (
+            <EuiRangeTooltip
+              value={value}
+              max={max}
+              min={min}
+              name={name}
+              showTicks={showTicks}
+            />
+          )}
+
+          {(showRange && this.isValid) && (
+            <EuiRangeHighlight
+              showTicks={showTicks}
+              min={Number(min)}
+              max={Number(max)}
+              lowerValue={Number(min)}
+              upperValue={Number(value)}
+            />
+          )}
+        </EuiRangeTrack>
+        {showLabels && <EuiRangeLabel side="max" disabled={disabled}>{max}</EuiRangeLabel>}
+        {showInput && (
+          <EuiRangeInput
+            min={min}
+            max={max}
+            step={step}
+            value={value}
+            disabled={disabled}
+            compressed={compressed}
+            onChange={this.handleOnChange}
+            name={name}
+            {...rest}
           />
         )}
-      </EuiRangeTrack>
-      {showLabels && <EuiRangeLabel side="max" disabled={disabled}>{max}</EuiRangeLabel>}
-      {showInput && (
-        <EuiRangeInput
-          min={min}
-          max={max}
-          step={step}
-          value={value}
-          disabled={disabled}
-          compressed={compressed}
-          onChange={onChange}
-          name={name}
-          {...rest}
-        />
-      )}
-    </EuiRangeWrapper>
-  );
-};
+      </EuiRangeWrapper>
+    );
+  }
+}
 
 EuiRange.propTypes = {
   name: PropTypes.string,
diff --git a/src/components/form/range/range.test.js b/src/components/form/range/range.test.js
index 3ee3786d07a..1030c9f62cc 100644
--- a/src/components/form/range/range.test.js
+++ b/src/components/form/range/range.test.js
@@ -61,7 +61,7 @@ describe('EuiRange', () => {
 
     test('range should render', () => {
       const component = render(
-        <EuiRange showRange />
+        <EuiRange showRange value="8" />
       );
 
       expect(component)

From a3dbc939e3f03d6056af6c7a0e3f98cbd1b37589 Mon Sep 17 00:00:00 2001
From: Greg Thompson <thompson.glowe@gmail.com>
Date: Wed, 30 Jan 2019 14:28:16 -0600
Subject: [PATCH 17/27] number service tests, scss whitespace clean up,
 onChange fn signature docs

---
 src/components/form/range/_dual_range.scss | 3 ---
 src/components/form/range/dual_range.js    | 3 +++
 src/components/form/range/range.js         | 3 +++
 src/services/number/number.test.tsx        | 8 +++++++-
 4 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/src/components/form/range/_dual_range.scss b/src/components/form/range/_dual_range.scss
index 428b0702ba5..ca94c1a834a 100644
--- a/src/components/form/range/_dual_range.scss
+++ b/src/components/form/range/_dual_range.scss
@@ -8,16 +8,13 @@
 
 .euiRangeThumb {
   @include euiCustomControl($type: 'round');
-
   @include euiRangeThumbStyle;
-
   content: '';
   position: absolute;
   left: 0;
   top: 50%;
   margin-top: -($euiRangeThumbHeight / 2);
   z-index: $euiZLevel2;
-
   pointer-events: none;
 
   &:focus {
diff --git a/src/components/form/range/dual_range.js b/src/components/form/range/dual_range.js
index 9ec71ccced0..b1862352845 100644
--- a/src/components/form/range/dual_range.js
+++ b/src/components/form/range/dual_range.js
@@ -308,6 +308,9 @@ EuiDualRange.propTypes = {
       label: PropTypes.node.isRequired,
     }),
   ),
+  /**
+   * Function signature: `([lowerValue, upperValue], isValid, event)`
+   */
   onChange: PropTypes.func,
   /**
    * Create colored indicators for certain intervals
diff --git a/src/components/form/range/range.js b/src/components/form/range/range.js
index 4b46650edde..9dad9a7dc6b 100644
--- a/src/components/form/range/range.js
+++ b/src/components/form/range/range.js
@@ -156,6 +156,9 @@ EuiRange.propTypes = {
       label: PropTypes.node.isRequired,
     }),
   ),
+  /**
+   * Function signature: `(event, isValid)`
+   */
   onChange: PropTypes.func,
   /**
    * Create colored indicators for certain intervals
diff --git a/src/services/number/number.test.tsx b/src/services/number/number.test.tsx
index 5d764e561a3..97c43181288 100644
--- a/src/services/number/number.test.tsx
+++ b/src/services/number/number.test.tsx
@@ -3,17 +3,23 @@ import { isWithinRange } from './number';
 describe('numbers', () => {
 
   test('isWithinRange', () => {
+    // True
     expect(isWithinRange(0, 100, 50)).toBe(true);
     expect(isWithinRange('0', 100, 50)).toBe(true);
     expect(isWithinRange(0, '100', 50)).toBe(true);
     expect(isWithinRange(0, 100, '50')).toBe(true);
     expect(isWithinRange(0, 100, 0)).toBe(true);
     expect(isWithinRange(0, 100, 100)).toBe(true);
-
+    expect(isWithinRange(-10, 10, 5)).toBe(true);
+    expect(isWithinRange(-10, 10, -5)).toBe(true);
+    expect(isWithinRange('-10', 10, '-5')).toBe(true);
+    // False
     expect(isWithinRange(0, 100, 101)).toBe(false);
     expect(isWithinRange(10, 100, 0)).toBe(false);
+    expect(isWithinRange(0, 100, -10)).toBe(false);
     expect(isWithinRange(0, 100, '')).toBe(false);
     expect(isWithinRange(0, 100, null)).toBe(false);
     expect(isWithinRange(0, 100)).toBe(false);
+    expect(isWithinRange(0, 100, 'a')).toBe(false);
   });
 });

From ee6116c4dc3d1a116781c2b91b4f5cc1236580af Mon Sep 17 00:00:00 2001
From: Greg Thompson <thompson.glowe@gmail.com>
Date: Wed, 30 Jan 2019 14:36:48 -0600
Subject: [PATCH 18/27] allow for empty string input value to prevent constant
 0

---
 src/components/form/range/range_input.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/form/range/range_input.js b/src/components/form/range/range_input.js
index 0072bb882be..c748b95baf1 100644
--- a/src/components/form/range/range_input.js
+++ b/src/components/form/range/range_input.js
@@ -30,7 +30,7 @@ export const EuiRangeInput = ({
       min={Number(min)}
       max={Number(max)}
       step={step}
-      value={Number(value)}
+      value={value === '' ? '' : Number(value)}
       disabled={disabled}
       compressed={compressed}
       onChange={onChange}

From a03e156630a6528b21a803bba9a22b5adfb5f436 Mon Sep 17 00:00:00 2001
From: Greg Thompson <thompson.glowe@gmail.com>
Date: Wed, 30 Jan 2019 16:12:25 -0600
Subject: [PATCH 19/27] #1485 euiDualRange changelog update

---
 CHANGELOG.md | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 7594ebd53b8..3c8b4769d68 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,7 +1,8 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
 - Changed `flex-basis` value on `EuiPageBody` for better cross-broswer support ([#1497](https://github.com/elastic/eui/pull/1497))
-- Converted a number of components to support text localization ([#1485](https://github.com/elastic/eui/pull/1485))
+- Converted a number of components to support text localization ([#1450](https://github.com/elastic/eui/pull/1450))
+- Created `EuiDualRange` using components from modularized, refactored `EuiRange`. New util service `isWithinRange` is the first in the number category. ([#1485](https://github.com/elastic/eui/pull/1485))
 
 ## [`6.7.4`](https://github.com/elastic/eui/tree/v6.7.4)
 

From e94f1b2548b929537bcd223de746905f86acefbf Mon Sep 17 00:00:00 2001
From: Greg Thompson <thompson.glowe@gmail.com>
Date: Thu, 31 Jan 2019 17:21:13 -0600
Subject: [PATCH 20/27] logic to always enable a valid state during thumb
 interactions

---
 src/components/form/range/dual_range.js | 20 +++++++++++++++++---
 1 file changed, 17 insertions(+), 3 deletions(-)

diff --git a/src/components/form/range/dual_range.js b/src/components/form/range/dual_range.js
index b1862352845..15ed02784aa 100644
--- a/src/components/form/range/dual_range.js
+++ b/src/components/form/range/dual_range.js
@@ -41,10 +41,24 @@ export class EuiDualRange extends Component {
     // Determine closer thumb
     let lower = this.lowerValue;
     let upper = this.upperValue;
-    if (Math.abs(lower - newVal) <= Math.abs(upper - newVal)) {
-      lower = newVal;
+    if (!this.isValid) {
+      const isBackwards = (Number(lower) >= Number(upper));
+      const isUnbound = Number(upper) < this.props.min || Number(lower) > this.props.max;
+      const isLow = lower < this.props.min;
+      const isHigh = upper > this.props.max;
+      if (isBackwards || isUnbound) {
+        lower = newVal - (this.props.step || 1);
+        upper = newVal;
+      } else {
+        lower = isLow ? this.props.min : lower;
+        upper = isHigh ? this.props.max : upper;
+      }
     } else {
-      upper = newVal;
+      if (Math.abs(lower - newVal) <= Math.abs(upper - newVal)) {
+        lower = newVal;
+      } else {
+        upper = newVal;
+      }
     }
     this._handleOnChange(lower, upper, e);
   }

From 1e2db88f99168c6f7233a3e3c6bcc4a4fd981516 Mon Sep 17 00:00:00 2001
From: Greg Thompson <thompson.glowe@gmail.com>
Date: Thu, 31 Jan 2019 17:33:27 -0600
Subject: [PATCH 21/27] comments for thumb positioning logic

---
 src/components/form/range/dual_range.js | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/components/form/range/dual_range.js b/src/components/form/range/dual_range.js
index 15ed02784aa..999d13eec77 100644
--- a/src/components/form/range/dual_range.js
+++ b/src/components/form/range/dual_range.js
@@ -38,22 +38,28 @@ export class EuiDualRange extends Component {
   }
 
   _determineThumbMovement = (newVal, e) => {
-    // Determine closer thumb
+    // Determine thumb movement based on slider interaction
     let lower = this.lowerValue;
     let upper = this.upperValue;
     if (!this.isValid) {
-      const isBackwards = (Number(lower) >= Number(upper));
+      // Non-standard positioning follows
+      const isBackwards = Number(lower) >= Number(upper);
       const isUnbound = Number(upper) < this.props.min || Number(lower) > this.props.max;
       const isLow = lower < this.props.min;
       const isHigh = upper > this.props.max;
       if (isBackwards || isUnbound) {
+        // Scenerio in which we cannot reasonably infer intention via click location due to current invalid thumb positions.
+        // Reset both values in the proximity of the click.
         lower = newVal - (this.props.step || 1);
         upper = newVal;
       } else {
+        // Scenerio in which we can reasonably infer intention via click location if range extrema are respected.
+        // Reset either value to its respective terminal value.
         lower = isLow ? this.props.min : lower;
         upper = isHigh ? this.props.max : upper;
       }
     } else {
+      // Standard positioning based on click event proximity to thumb locations
       if (Math.abs(lower - newVal) <= Math.abs(upper - newVal)) {
         lower = newVal;
       } else {

From 2db20b45df5dd12f8615007f7873ddda31dc7460 Mon Sep 17 00:00:00 2001
From: Greg Thompson <thompson.glowe@gmail.com>
Date: Fri, 1 Feb 2019 13:11:37 -0600
Subject: [PATCH 22/27] handle keyboard value stepping better; remove pseudo
 value from dual input

---
 .../range/__snapshots__/dual_range.test.js.snap   |  4 ----
 src/components/form/range/dual_range.js           | 15 ++++++++++++---
 2 files changed, 12 insertions(+), 7 deletions(-)

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 2c780426658..1ee613624ec 100644
--- a/src/components/form/range/__snapshots__/dual_range.test.js.snap
+++ b/src/components/form/range/__snapshots__/dual_range.test.js.snap
@@ -14,7 +14,6 @@ exports[`EuiDualRange allows value prop to accept numbers 1`] = `
       min="1"
       tabindex="-1"
       type="range"
-      value="1,8"
     />
     <div
       class="euiRangeHighlight"
@@ -46,7 +45,6 @@ exports[`EuiDualRange is rendered 1`] = `
       name="name"
       tabindex="-1"
       type="range"
-      value="1,8"
     />
     <div
       class="euiRangeHighlight"
@@ -150,7 +148,6 @@ exports[`EuiDualRange props inputs should render 1`] = `
       name="name"
       tabindex="-1"
       type="range"
-      value="1,8"
     />
     <div
       class="euiRangeHighlight"
@@ -272,7 +269,6 @@ exports[`EuiDualRange props range should render 1`] = `
       min="1"
       tabindex="-1"
       type="range"
-      value="1,8"
     />
     <div
       class="euiRangeHighlight"
diff --git a/src/components/form/range/dual_range.js b/src/components/form/range/dual_range.js
index 999d13eec77..08a290db8cf 100644
--- a/src/components/form/range/dual_range.js
+++ b/src/components/form/range/dual_range.js
@@ -87,17 +87,27 @@ export class EuiDualRange extends Component {
   }
 
   _handleKeyDown = (value, e) => {
-    e.preventDefault();
-    let newVal = value;
+    let newVal = Number(value);
+    let changeRemainder = 0;
     const change = this.props.step || 1;
     switch (e.keyCode) {
       case keyCodes.UP:
       case keyCodes.RIGHT:
+        e.preventDefault();
         newVal += change;
+        changeRemainder = (newVal - this.props.min) % change;
+        if (change !== 1 && changeRemainder > 0) {
+          newVal = newVal - changeRemainder;
+        }
         break;
       case keyCodes.DOWN:
       case keyCodes.LEFT:
+        e.preventDefault();
         newVal -= change;
+        changeRemainder = (newVal - this.props.min) % change;
+        if (change !== 1 && changeRemainder > 0) {
+          newVal = newVal + (change - changeRemainder);
+        }
         break;
     }
     return newVal;
@@ -215,7 +225,6 @@ export class EuiDualRange extends Component {
             min={min}
             max={max}
             step={step}
-            value={value}
             disabled={disabled}
             onChange={this.handleSliderChange}
             style={style}

From 774935e8c1e65a15b55886121981272c60ba6516 Mon Sep 17 00:00:00 2001
From: Greg Thompson <thompson.glowe@gmail.com>
Date: Fri, 1 Feb 2019 14:37:24 -0600
Subject: [PATCH 23/27] better thumb swap logic; docs notice about value
 retrieval

---
 src-docs/src/views/range/range_example.js | 21 ++++++
 src/components/form/range/dual_range.js   | 83 ++++++++++++++++-------
 2 files changed, 80 insertions(+), 24 deletions(-)

diff --git a/src-docs/src/views/range/range_example.js b/src-docs/src/views/range/range_example.js
index 39dc4f6d854..10ba13cb139 100644
--- a/src-docs/src/views/range/range_example.js
+++ b/src-docs/src/views/range/range_example.js
@@ -57,6 +57,27 @@ export const RangeControlExample = {
     },
     {
       title: 'DualRange',
+      text: (
+        <Fragment>
+          <EuiCallOut color="warning" title="Retrieving field values">
+            <p>
+            Two-value <code>input[type=range]</code> elements are not part of the HTML5 specification.
+            Because of this support gap, <code>EuiDualRange</code> cannot expose a native <code>value</code> property
+            for native <code>form</code> to consumption.
+              <strong>
+                The React <code>onChange</code> prop is the recommended method
+                for retrieving the upper and lower values.
+              </strong>
+            </p>
+            <p>
+              <code>EuiDualRange</code> does use native <code>input</code>s to help validate step values
+            and range limits. These may be used as <code>form</code> values when <code>showInput</code> is in use.
+            The alternative is to store values in <code>input[type=hidden]</code>.
+            </p>
+          </EuiCallOut>
+          <EuiSpacer size="l" />
+        </Fragment>
+      ),
       source: [{
         type: GuideSectionTypes.JS,
         code: dualRangeSource,
diff --git a/src/components/form/range/dual_range.js b/src/components/form/range/dual_range.js
index 08a290db8cf..5ac72882346 100644
--- a/src/components/form/range/dual_range.js
+++ b/src/components/form/range/dual_range.js
@@ -15,7 +15,8 @@ import { EuiRangeWrapper } from './range_wrapper';
 export class EuiDualRange extends Component {
   state = {
     hasFocus: false,
-    rangeSliderRefAvailable: false
+    rangeSliderRefAvailable: false,
+    lastThumbInteraction: null
   }
 
   rangeSliderRef = null;
@@ -37,36 +38,70 @@ export class EuiDualRange extends Component {
       && isWithinRange(this.lowerValue, this.props.max, this.upperValue);
   }
 
+  _determineInvalidThumbMovement = (newVal, lower, upper, e) => {
+    const isBackwards = Number(lower) >= Number(upper);
+    const isUnbound = Number(upper) < this.props.min || Number(lower) > this.props.max;
+    const isLow = lower < this.props.min;
+    const isHigh = upper > this.props.max;
+    if (isBackwards || isUnbound) {
+      // Scenerio in which we cannot reasonably infer intention via click location due to current invalid thumb positions.
+      // Reset both values in the proximity of the click.
+      lower = newVal - (this.props.step || 1);
+      upper = newVal;
+    } else {
+      // Scenerio in which we can reasonably infer intention via click location if range extrema are respected.
+      // Reset either value to its respective terminal value.
+      lower = isLow ? this.props.min : lower;
+      upper = isHigh ? this.props.max : upper;
+    }
+    this._handleOnChange(lower, upper, e);
+  }
+
+  _determineValidThumbMovement = (newVal, lower, upper, e) => {
+    const thumbsAreEquidistant = Math.abs(lower - newVal) === Math.abs(upper - newVal);
+    // Lower thumb nearing swap with upper thumb
+    if (
+      (newVal === upper || (newVal < upper && thumbsAreEquidistant))
+      && this.state.lastThumbInteraction === 'lower'
+    ) {
+      lower = newVal;
+    }
+    // Upper thumb nearing swap with lower thumb
+    else if (
+      (newVal === lower || (newVal > lower && thumbsAreEquidistant))
+      && this.state.lastThumbInteraction === 'upper'
+    ) {
+      upper = newVal;
+    }
+    // Lower thumb targeted or right-moving swap has occured
+    else if (
+      Math.abs(lower - newVal) < Math.abs(upper - newVal)
+      || (thumbsAreEquidistant && this.state.lastThumbInteraction === 'upper')
+    ) {
+      this.setState({
+        lastThumbInteraction: 'lower'
+      });
+      lower = newVal;
+    }
+    // Upper thumb targeted or left-moving swap has occured
+    else {
+      this.setState({
+        lastThumbInteraction: 'upper'
+      });
+      upper = newVal;
+    }
+    this._handleOnChange(lower, upper, e);
+  }
+
   _determineThumbMovement = (newVal, e) => {
     // Determine thumb movement based on slider interaction
-    let lower = this.lowerValue;
-    let upper = this.upperValue;
     if (!this.isValid) {
       // Non-standard positioning follows
-      const isBackwards = Number(lower) >= Number(upper);
-      const isUnbound = Number(upper) < this.props.min || Number(lower) > this.props.max;
-      const isLow = lower < this.props.min;
-      const isHigh = upper > this.props.max;
-      if (isBackwards || isUnbound) {
-        // Scenerio in which we cannot reasonably infer intention via click location due to current invalid thumb positions.
-        // Reset both values in the proximity of the click.
-        lower = newVal - (this.props.step || 1);
-        upper = newVal;
-      } else {
-        // Scenerio in which we can reasonably infer intention via click location if range extrema are respected.
-        // Reset either value to its respective terminal value.
-        lower = isLow ? this.props.min : lower;
-        upper = isHigh ? this.props.max : upper;
-      }
+      this._determineInvalidThumbMovement(newVal, this.lowerValue, this.upperValue, e);
     } else {
       // Standard positioning based on click event proximity to thumb locations
-      if (Math.abs(lower - newVal) <= Math.abs(upper - newVal)) {
-        lower = newVal;
-      } else {
-        upper = newVal;
-      }
+      this._determineValidThumbMovement(newVal, this.lowerValue, this.upperValue, e);
     }
-    this._handleOnChange(lower, upper, e);
   }
 
   _handleOnChange = (lower, upper, e) => {

From b9817a0c564b4e8cd7b8842498c8afdcc85eaab1 Mon Sep 17 00:00:00 2001
From: Greg Thompson <thompson.glowe@gmail.com>
Date: Tue, 5 Feb 2019 13:53:15 -0600
Subject: [PATCH 24/27] ts fixes; isWithinRange simplification

---
 src/components/form/range/dual_range.js | 20 ++++++++++----------
 src/components/form/range/index.d.ts    |  6 +++---
 src/services/index.ts                   |  4 ++++
 src/services/number/number.test.tsx     |  3 ---
 src/services/number/number.ts           | 14 +++-----------
 5 files changed, 20 insertions(+), 27 deletions(-)

diff --git a/src/components/form/range/dual_range.js b/src/components/form/range/dual_range.js
index 5ac72882346..c5391ef17d1 100644
--- a/src/components/form/range/dual_range.js
+++ b/src/components/form/range/dual_range.js
@@ -123,25 +123,25 @@ export class EuiDualRange extends Component {
 
   _handleKeyDown = (value, e) => {
     let newVal = Number(value);
-    let changeRemainder = 0;
-    const change = this.props.step || 1;
+    let stepRemainder = 0;
+    const step = this.props.step || 1;
     switch (e.keyCode) {
       case keyCodes.UP:
       case keyCodes.RIGHT:
         e.preventDefault();
-        newVal += change;
-        changeRemainder = (newVal - this.props.min) % change;
-        if (change !== 1 && changeRemainder > 0) {
-          newVal = newVal - changeRemainder;
+        newVal += step;
+        stepRemainder = (newVal - this.props.min) % step;
+        if (step !== 1 && stepRemainder > 0) {
+          newVal = newVal - stepRemainder;
         }
         break;
       case keyCodes.DOWN:
       case keyCodes.LEFT:
         e.preventDefault();
-        newVal -= change;
-        changeRemainder = (newVal - this.props.min) % change;
-        if (change !== 1 && changeRemainder > 0) {
-          newVal = newVal + (change - changeRemainder);
+        newVal -= step;
+        stepRemainder = (newVal - this.props.min) % step;
+        if (step !== 1 && stepRemainder > 0) {
+          newVal = newVal + (step - stepRemainder);
         }
         break;
     }
diff --git a/src/components/form/range/index.d.ts b/src/components/form/range/index.d.ts
index 4696c47dc89..be89c006857 100644
--- a/src/components/form/range/index.d.ts
+++ b/src/components/form/range/index.d.ts
@@ -1,4 +1,4 @@
-import { CommonProps } from '../../common';
+import { CommonProps, Omit } from '../../common';
 
 import { SFC, ReactNode, HTMLAttributes, ChangeEventHandler, InputHTMLAttributes } from 'react';
 
@@ -43,10 +43,10 @@ declare module '@elastic/eui' {
 
     export interface EuiDualRangeProps {
       // Override acceptable value type
-      value: Array<number | string>
+      value: [number | string, number | string]
     }
 
     export const EuiDualRange: SFC<
-      CommonProps & InputHTMLAttributes<HTMLInputElement> & EuiRangeProps & EuiDualRangeProps
+      CommonProps & Omit<InputHTMLAttributes<HTMLInputElement>, 'value'> & EuiRangeProps & EuiDualRangeProps
     >;
 }
diff --git a/src/services/index.ts b/src/services/index.ts
index a07bfc4059b..ccd531cedf9 100644
--- a/src/services/index.ts
+++ b/src/services/index.ts
@@ -39,6 +39,10 @@ export {
   formatText,
 } from './format';
 
+export {
+  isWithinRange,
+} from './number';
+
 export {
   Pager
 } from './paging';
diff --git a/src/services/number/number.test.tsx b/src/services/number/number.test.tsx
index 97c43181288..5a8c6306319 100644
--- a/src/services/number/number.test.tsx
+++ b/src/services/number/number.test.tsx
@@ -18,8 +18,5 @@ describe('numbers', () => {
     expect(isWithinRange(10, 100, 0)).toBe(false);
     expect(isWithinRange(0, 100, -10)).toBe(false);
     expect(isWithinRange(0, 100, '')).toBe(false);
-    expect(isWithinRange(0, 100, null)).toBe(false);
-    expect(isWithinRange(0, 100)).toBe(false);
-    expect(isWithinRange(0, 100, 'a')).toBe(false);
   });
 });
diff --git a/src/services/number/number.ts b/src/services/number/number.ts
index 32a0043ea86..e84039d291a 100644
--- a/src/services/number/number.ts
+++ b/src/services/number/number.ts
@@ -1,15 +1,7 @@
-import { isNil } from '../predicate';
-
-export const isWithinRange = (min?: any, max?: any, value?: any) => {
-  if (isNil(value) || isNaN(value) || value === '') {
+export const isWithinRange = (min: number | string, max: number | string, value: number | string) => {
+  if (value === '') {
     return false;
   }
 
-  min = Number(min);
-  max = Number(max);
-  value = Number(value);
-  if (value >= min && value <= max) {
-    return true;
-  }
-  return false;
+  return min <= value && value <= max;
 };

From 3051f730960acc8481df578a41b506eb9e97420c Mon Sep 17 00:00:00 2001
From: Greg Thompson <thompson.glowe@gmail.com>
Date: Tue, 5 Feb 2019 14:27:21 -0600
Subject: [PATCH 25/27] min and max 0-length check

---
 src/services/number/number.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/services/number/number.ts b/src/services/number/number.ts
index e84039d291a..8e84bb2abb8 100644
--- a/src/services/number/number.ts
+++ b/src/services/number/number.ts
@@ -1,5 +1,5 @@
 export const isWithinRange = (min: number | string, max: number | string, value: number | string) => {
-  if (value === '') {
+  if (min === '' || max === '' || value === '') {
     return false;
   }
 

From 4156dc34f1ddac629ce664fa0edf76832059a37c Mon Sep 17 00:00:00 2001
From: Caroline Horn <549577+cchaos@users.noreply.github.com>
Date: Wed, 6 Feb 2019 10:20:23 -0600
Subject: [PATCH 26/27] rangeClasses -> sliderClasses

Name change suggestion from @cchaos

Co-Authored-By: thompsongl <thompsongl@users.noreply.github.com>
---
 src/components/form/range/dual_range.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/form/range/dual_range.js b/src/components/form/range/dual_range.js
index c5391ef17d1..a3cf01eaaed 100644
--- a/src/components/form/range/dual_range.js
+++ b/src/components/form/range/dual_range.js
@@ -216,7 +216,7 @@ export class EuiDualRange extends Component {
       ...rest
     } = this.props;
 
-    const rangeClasses = classNames('euiDualRange__slider', className);
+    const sliderClasses = classNames('euiDualRange__slider', className);
 
     return (
       <EuiRangeWrapper
@@ -256,7 +256,7 @@ export class EuiDualRange extends Component {
             ref={this.handleRangeSliderRefUpdate}
             id={id}
             name={name}
-            className={rangeClasses}
+            className={sliderClasses}
             min={min}
             max={max}
             step={step}

From 6712617f6dad3283933e078dfcd91cc6ccbafbbe Mon Sep 17 00:00:00 2001
From: Greg Thompson <thompson.glowe@gmail.com>
Date: Wed, 6 Feb 2019 10:58:36 -0600
Subject: [PATCH 27/27] move all components to individual files

---
 src/components/form/range/_dual_range.scss   | 20 -----
 src/components/form/range/_index.scss        |  3 +
 src/components/form/range/_range_levels.scss | 36 +++++++++
 src/components/form/range/_range_thumb.scss  | 19 +++++
 src/components/form/range/_range_ticks.scss  | 46 +++++++++++
 src/components/form/range/_range_track.scss  | 84 --------------------
 src/components/form/range/dual_range.js      | 29 +------
 src/components/form/range/range_levels.js    | 36 +++++++++
 src/components/form/range/range_thumb.js     | 32 ++++++++
 src/components/form/range/range_ticks.js     | 75 +++++++++++++++++
 src/components/form/range/range_track.js     | 75 ++---------------
 src/services/number/number.ts                |  3 +-
 12 files changed, 255 insertions(+), 203 deletions(-)
 create mode 100644 src/components/form/range/_range_levels.scss
 create mode 100644 src/components/form/range/_range_thumb.scss
 create mode 100644 src/components/form/range/_range_ticks.scss
 create mode 100644 src/components/form/range/range_levels.js
 create mode 100644 src/components/form/range/range_thumb.js
 create mode 100644 src/components/form/range/range_ticks.js

diff --git a/src/components/form/range/_dual_range.scss b/src/components/form/range/_dual_range.scss
index ca94c1a834a..573a374eae5 100644
--- a/src/components/form/range/_dual_range.scss
+++ b/src/components/form/range/_dual_range.scss
@@ -5,23 +5,3 @@
     }
   }
 }
-
-.euiRangeThumb {
-  @include euiCustomControl($type: 'round');
-  @include euiRangeThumbStyle;
-  content: '';
-  position: absolute;
-  left: 0;
-  top: 50%;
-  margin-top: -($euiRangeThumbHeight / 2);
-  z-index: $euiZLevel2;
-  pointer-events: none;
-
-  &:focus {
-    @include euiCustomControlFocused;
-  }
-
-  &--hasTicks {
-    top: 25%;
-  }
-}
diff --git a/src/components/form/range/_index.scss b/src/components/form/range/_index.scss
index d05ef6cd7d2..9f0f884dec0 100644
--- a/src/components/form/range/_index.scss
+++ b/src/components/form/range/_index.scss
@@ -3,7 +3,10 @@
 @import 'range_highlight';
 @import 'range_input';
 @import 'range_label';
+@import 'range_levels';
 @import 'range_slider';
+@import 'range_thumb';
+@import 'range_ticks';
 @import 'range_tooltip';
 @import 'range_track';
 @import 'range_wrapper';
diff --git a/src/components/form/range/_range_levels.scss b/src/components/form/range/_range_levels.scss
new file mode 100644
index 00000000000..f45d63e194e
--- /dev/null
+++ b/src/components/form/range/_range_levels.scss
@@ -0,0 +1,36 @@
+.euiRangeLevels {
+  display: flex;
+  justify-content: stretch;
+  z-index: $euiZLevel0;
+
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: ($euiFormControlHeight / 2) + 2px;
+
+  &--hasTicks {
+    top: ($euiFormControlHeight / 4) + 2px;
+  }
+}
+
+.euiRangeLevel {
+  display: block;
+  height: 6px;
+  border-radius: 6px;
+  margin: 2px;
+}
+
+// Modifier naming and colors.
+$euiRangeLevelColors: (
+  primary: $euiColorPrimary,
+  success: $euiColorSuccess,
+  warning: $euiColorWarning,
+  danger: $euiColorDanger,
+);
+
+// Create level modifiers based upon the map.
+@each $name, $color in $euiRangeLevelColors {
+  .euiRangeLevel--#{$name} {
+    background-color: transparentize($color, .7);
+  }
+}
diff --git a/src/components/form/range/_range_thumb.scss b/src/components/form/range/_range_thumb.scss
new file mode 100644
index 00000000000..49e2e6bbbda
--- /dev/null
+++ b/src/components/form/range/_range_thumb.scss
@@ -0,0 +1,19 @@
+.euiRangeThumb {
+  @include euiCustomControl($type: 'round');
+  @include euiRangeThumbStyle;
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 50%;
+  margin-top: -($euiRangeThumbHeight / 2);
+  z-index: $euiZLevel2;
+  pointer-events: none;
+
+  &:focus {
+    @include euiCustomControlFocused;
+  }
+
+  &--hasTicks {
+    top: 25%;
+  }
+}
diff --git a/src/components/form/range/_range_ticks.scss b/src/components/form/range/_range_ticks.scss
new file mode 100644
index 00000000000..3c30bff4967
--- /dev/null
+++ b/src/components/form/range/_range_ticks.scss
@@ -0,0 +1,46 @@
+.euiRangeTicks {
+  position: absolute;
+  left: ($euiRangeThumbWidth / 2);
+  right: ($euiRangeThumbWidth / 2);
+  top: $euiSizeS;
+  display: flex;
+  z-index: $euiZLevel1;
+}
+
+.euiRangeTick {
+  overflow-x: hidden;
+  text-overflow: ellipsis;
+  font-size: $euiFontSizeXS;
+  position: relative;
+  padding-top: $euiSize;
+
+  &::before {
+    @include size($euiSizeXS);
+
+    content: '';
+    background-color: $euiColorDarkShade;
+    border-radius: 100%;
+    position: absolute;
+    top: 0;
+    left: calc(50% - #{($euiSizeXS/2)});
+  }
+
+  &--isCustom {
+    position: absolute;
+    transform: translateX(-50%);
+  }
+
+  &:enabled:hover,
+  &:focus,
+  &--selected {
+    color: $euiColorPrimary;
+  }
+
+  &--selected {
+    font-weight: $euiFontWeightMedium;
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+  }
+}
diff --git a/src/components/form/range/_range_track.scss b/src/components/form/range/_range_track.scss
index 98f9003d181..0fdd33c6e31 100644
--- a/src/components/form/range/_range_track.scss
+++ b/src/components/form/range/_range_track.scss
@@ -8,87 +8,3 @@
     opacity: $euiRangeDisabledOpacity;
   }
 }
-
-.euiRangeTicks {
-  position: absolute;
-  left: ($euiRangeThumbWidth / 2);
-  right: ($euiRangeThumbWidth / 2);
-  top: $euiSizeS;
-  display: flex;
-  z-index: $euiZLevel1;
-}
-
-.euiRangeTick {
-  overflow-x: hidden;
-  text-overflow: ellipsis;
-  font-size: $euiFontSizeXS;
-  position: relative;
-  padding-top: $euiSize;
-
-  &::before {
-    @include size($euiSizeXS);
-
-    content: '';
-    background-color: $euiColorDarkShade;
-    border-radius: 100%;
-    position: absolute;
-    top: 0;
-    left: calc(50% - #{($euiSizeXS/2)});
-  }
-
-  &--isCustom {
-    position: absolute;
-    transform: translateX(-50%);
-  }
-
-  &:enabled:hover,
-  &:focus,
-  &--selected {
-    color: $euiColorPrimary;
-  }
-
-  &--selected {
-    font-weight: $euiFontWeightMedium;
-  }
-
-  &:disabled {
-    cursor: not-allowed;
-  }
-}
-
-.euiRangeLevels {
-  display: flex;
-  justify-content: stretch;
-  z-index: $euiZLevel0;
-
-  position: absolute;
-  left: 0;
-  right: 0;
-  top: ($euiFormControlHeight / 2) + 2px;
-
-  &--hasTicks {
-    top: ($euiFormControlHeight / 4) + 2px;
-  }
-}
-
-.euiRangeLevel {
-  display: block;
-  height: 6px;
-  border-radius: 6px;
-  margin: 2px;
-}
-
-// Modifier naming and colors.
-$euiRangeLevelColors: (
-  primary: $euiColorPrimary,
-  success: $euiColorSuccess,
-  warning: $euiColorWarning,
-  danger: $euiColorDanger,
-);
-
-// Create level modifiers based upon the map.
-@each $name, $color in $euiRangeLevelColors {
-  .euiRangeLevel--#{$name} {
-    background-color: transparentize($color, .7);
-  }
-}
diff --git a/src/components/form/range/dual_range.js b/src/components/form/range/dual_range.js
index a3cf01eaaed..3e6ab5026b2 100644
--- a/src/components/form/range/dual_range.js
+++ b/src/components/form/range/dual_range.js
@@ -9,6 +9,7 @@ import { EuiRangeHighlight } from './range_highlight';
 import { EuiRangeInput } from './range_input';
 import { EuiRangeLabel } from './range_label';
 import { EuiRangeSlider } from './range_slider';
+import { EuiRangeThumb } from './range_thumb';
 import { EuiRangeTrack, LEVEL_COLORS } from './range_track';
 import { EuiRangeWrapper } from './range_wrapper';
 
@@ -403,31 +404,3 @@ EuiDualRange.defaultProps = {
   showTicks: false,
   levels: [],
 };
-
-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_levels.js b/src/components/form/range/range_levels.js
new file mode 100644
index 00000000000..3cf590aa551
--- /dev/null
+++ b/src/components/form/range/range_levels.js
@@ -0,0 +1,36 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+export const LEVEL_COLORS = ['primary', 'success', 'warning', 'danger'];
+
+export const EuiRangeLevels = ({ levels, max, min, showTicks }) => {
+  const classes = classNames('euiRangeLevels', {
+    'euiRangeLevels--hasTicks': showTicks
+  });
+  return (
+    <div className={classes}>
+      {levels.map((level, index) => {
+        const range = level.max - level.min;
+        const width = (range / (max - min)) * 100;
+
+        return (
+          <span key={index} style={{ width: `${width}%` }} className={`euiRangeLevel euiRangeLevel--${level.color}`} />
+        );
+      })}
+    </div>
+  );
+};
+
+EuiRangeLevels.propTypes = {
+  levels: PropTypes.arrayOf(
+    PropTypes.shape({
+      min: PropTypes.number,
+      max: PropTypes.number,
+      color: PropTypes.oneOf(LEVEL_COLORS),
+    }),
+  ),
+  max: PropTypes.number.isRequired,
+  min: PropTypes.number.isRequired,
+  showTicks: PropTypes.bool
+};
diff --git a/src/components/form/range/range_thumb.js b/src/components/form/range/range_thumb.js
new file mode 100644
index 00000000000..0b87eadc169
--- /dev/null
+++ b/src/components/form/range/range_thumb.js
@@ -0,0 +1,32 @@
+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_ticks.js b/src/components/form/range/range_ticks.js
new file mode 100644
index 00000000000..16c380b809e
--- /dev/null
+++ b/src/components/form/range/range_ticks.js
@@ -0,0 +1,75 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+export const EuiRangeTicks = ({ disabled, onChange, ticks, tickObject, value, max }) => {
+  // Align with item labels across the range by adding
+  // left and right negative margins that is half of the tick marks
+  const ticksStyle = !!ticks ? undefined : { margin: `0 ${tickObject.percentageWidth / -2}%`, left: 0, right: 0 };
+
+  return (
+    <div className="euiRangeTicks" style={ticksStyle}>
+      {tickObject.sequence.map((tickValue) => {
+        const tickStyle = {};
+        let customTick;
+        if (ticks) {
+          customTick = ticks.find(o => o.value === tickValue);
+
+          if (customTick == null) {
+            return;
+          } else {
+            tickStyle.left = `${(customTick.value / max) * 100}%`;
+          }
+        } else {
+          tickStyle.width = `${tickObject.percentageWidth}%`;
+        }
+
+        const tickClasses = classNames(
+          'euiRangeTick',
+          {
+            'euiRangeTick--selected': value === tickValue,
+            'euiRangeTick--isCustom': customTick,
+          }
+        );
+
+        return (
+          <button
+            type="button"
+            className={tickClasses}
+            key={tickValue}
+            value={tickValue}
+            disabled={disabled}
+            onClick={onChange}
+            style={tickStyle}
+
+            tabIndex="-1"
+          >
+            {customTick ? customTick.label : tickValue}
+          </button>
+        );
+      })}
+    </div>
+  );
+};
+
+EuiRangeTicks.propTypes = {
+  disabled: PropTypes.bool,
+  onChange: PropTypes.func,
+  ticks: PropTypes.arrayOf(
+    PropTypes.shape({
+      value: PropTypes.number.isRequired,
+      label: PropTypes.node.isRequired,
+    }),
+  ),
+  tickObject: PropTypes.shape({
+    decimalWidth: PropTypes.number,
+    percentageWidth: PropTypes.number,
+    sequence: PropTypes.arrayOf(PropTypes.number),
+  }).isRequired,
+  value: PropTypes.oneOfType([
+    PropTypes.number,
+    PropTypes.string,
+    PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string]))
+  ]),
+  max: PropTypes.number.isRequired
+};
diff --git a/src/components/form/range/range_track.js b/src/components/form/range/range_track.js
index 8d74a3c462c..a09fb8d75eb 100644
--- a/src/components/form/range/range_track.js
+++ b/src/components/form/range/range_track.js
@@ -2,9 +2,12 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
-import { range, find } from 'lodash';
+import { range } from 'lodash';
 
-export const LEVEL_COLORS = ['primary', 'success', 'warning', 'danger'];
+import { EuiRangeLevels, LEVEL_COLORS } from './range_levels';
+import { EuiRangeTicks } from './range_ticks';
+
+export { LEVEL_COLORS };
 
 export class EuiRangeTrack extends Component {
 
@@ -116,71 +119,3 @@ EuiRangeTrack.propTypes = {
     }),
   ),
 };
-
-const EuiRangeTicks = ({ disabled, onChange, ticks, tickObject, value, max }) => {
-  // Align with item labels across the range by adding
-  // left and right negative margins that is half of the tick marks
-  const ticksStyle = !!ticks ? undefined : { margin: `0 ${tickObject.percentageWidth / -2}%`, left: 0, right: 0 };
-
-  return (
-    <div className="euiRangeTicks" style={ticksStyle}>
-      {tickObject.sequence.map((tickValue) => {
-        const tickStyle = {};
-        let customTick;
-        if (ticks) {
-          customTick = find(ticks, function (o) { return o.value === tickValue; });
-
-          if (customTick == null) {
-            return;
-          } else {
-            tickStyle.left = `${(customTick.value / max) * 100}%`;
-          }
-        } else {
-          tickStyle.width = `${tickObject.percentageWidth}%`;
-        }
-
-        const tickClasses = classNames(
-          'euiRangeTick',
-          {
-            'euiRangeTick--selected': value === tickValue,
-            'euiRangeTick--isCustom': customTick,
-          }
-        );
-
-        return (
-          <button
-            type="button"
-            className={tickClasses}
-            key={tickValue}
-            value={tickValue}
-            disabled={disabled}
-            onClick={onChange}
-            style={tickStyle}
-
-            tabIndex="-1"
-          >
-            {customTick ? customTick.label : tickValue}
-          </button>
-        );
-      })}
-    </div>
-  );
-};
-
-const EuiRangeLevels = ({ levels, max, min, showTicks }) => {
-  const classes = classNames('euiRangeLevels', {
-    'euiRangeLevels--hasTicks': showTicks
-  });
-  return (
-    <div className={classes}>
-      {levels.map((level, index) => {
-        const range = level.max - level.min;
-        const width = (range / (max - min)) * 100;
-
-        return (
-          <span key={index} style={{ width: `${width}%` }} className={`euiRangeLevel euiRangeLevel--${level.color}`} />
-        );
-      })}
-    </div>
-  );
-};
diff --git a/src/services/number/number.ts b/src/services/number/number.ts
index 90b4f0b5aa4..27e02f917c6 100644
--- a/src/services/number/number.ts
+++ b/src/services/number/number.ts
@@ -7,5 +7,6 @@ export const isWithinRange = (
     return false;
   }
 
-  return min <= value && value <= max;
+  const val = Number(value);
+  return Number(min) <= val && val <= Number(max);
 };