[Input controls vis] replace react-input-range with EuiDualRange

package.json

@@ -201,7 +201,6 @@
     "react-color": "^2.13.8",
     "react-dom": "^16.8.0",
     "react-grid-layout": "^0.16.2",
-    "react-input-range": "^1.3.0",
     "react-markdown": "^3.1.4",
     "react-redux": "^5.0.7",
     "react-router-dom": "^4.3.1",

src/legacy/core_plugins/input_control_vis/public/components/vis/__snapshots__/input_control_vis.test.js.snap

@@ -366,7 +366,7 @@ exports[`Renders range control 1`] = `
         }
       }
     >
-      <InjectIntl(RangeControlUi)
+      <RangeControl
         control={
           Object {
             "format": [Function],

src/legacy/core_plugins/input_control_vis/public/components/vis/__snapshots__/range_control.test.js.snap

@@ -7,19 +7,9 @@ exports[`disabled 1`] = `
   id="mock-range-control"
   label="range control"
 >
-  <EuiRange
-    compressed={false}
+  <ValidatedDualRange
     disabled={true}
-    fullWidth={false}
-    levels={Array []}
-    max={100}
-    min={0}
-    showInput={false}
-    showLabels={false}
-    showRange={false}
-    showTicks={false}
-    showValue={false}
-    step={1}
+    showInput={true}
   />
 </FormRow>
 `;
@@ -31,95 +21,32 @@ exports[`renders RangeControl 1`] = `
   id="mock-range-control"
   label="range control"
 >
-  <EuiFormRow
-    data-test-subj="rangeControlFormRow"
-    describedByIds={Array []}
-    error={Array []}
-    fullWidth={false}
-    hasEmptyLabelSpace={false}
-    isInvalid={false}
-    labelType="label"
-  >
-    <EuiFlexGroup
-      alignItems="center"
-      component="div"
-      direction="row"
-      gutterSize="s"
-      justifyContent="flexStart"
-      responsive={true}
-      wrap={false}
-    >
-      <EuiFlexItem
-        component="div"
-        grow={false}
-      >
-        <input
-          className="euiFieldNumber"
-          data-test-subj="rangeControlMinInputValue"
-          id="mock-range-control_min"
-          max={100}
-          min={0}
-          name="min"
-          onChange={[Function]}
-          type="number"
-          value=""
-        />
-      </EuiFlexItem>
-      <EuiFlexItem
-        className="icvInputRange__container"
-        component="div"
-        grow={false}
-      >
-        <InputRange
-          allowSameValues={false}
-          ariaLabelledby="mock-range-control"
-          classNames={
-            Object {
-              "activeTrack": "input-range__track input-range__track--active",
-              "disabledInputRange": "input-range input-range--disabled",
-              "inputRange": "input-range",
-              "labelContainer": "input-range__label-container",
-              "maxLabel": "input-range__label input-range__label--max",
-              "minLabel": "input-range__label input-range__label--min",
-              "slider": "input-range__slider",
-              "sliderContainer": "input-range__slider-container",
-              "track": "input-range__track input-range__track--background",
-              "valueLabel": "input-range__label input-range__label--value",
-            }
-          }
-          disabled={false}
-          draggableTrack={true}
-          formatLabel={[Function]}
-          maxValue={100}
-          minValue={0}
-          onChange={[Function]}
-          onChangeComplete={[Function]}
-          step={1}
-          value={
-            Object {
-              "max": 0,
-              "min": 0,
-            }
-          }
-        />
-      </EuiFlexItem>
-      <EuiFlexItem
-        component="div"
-        grow={false}
-      >
-        <input
-          className="euiFieldNumber"
-          data-test-subj="rangeControlMaxInputValue"
-          id="mock-range-control_max"
-          max={100}
-          min={0}
-          name="max"
-          onChange={[Function]}
-          type="number"
-          value=""
-        />
-      </EuiFlexItem>
-    </EuiFlexGroup>
-  </EuiFormRow>
+  <ValidatedDualRange
+    id="mock-range-control"
+    max={100}
+    min={0}
+    onChange={[Function]}
+    showInput={true}
+    showRange={true}
+    showTicks={true}
+    ticks={
+      Array [
+        Object {
+          "label": 0,
+          "value": 0,
+        },
+        Object {
+          "label": 100,
+          "value": 100,
+        },
+      ]
+    }
+    value={
+      Array [
+        "",
+        "",
+      ]
+    }
+  />
 </FormRow>
 `;

src/legacy/core_plugins/input_control_vis/public/components/vis/_vis.scss

@@ -2,25 +2,4 @@
   width: 100%;
   margin: 0 $euiSizeXS;
   padding: $euiSizeS;
-
-  // Removes the browser's number stepper
-  input[type=number]::-webkit-inner-spin-button,
-  input[type=number]::-webkit-outer-spin-button {
-    -webkit-appearance: none;
-    margin: 0;
-  }
-
-  // hide slider labels since they are displayed in inputs
-  .input-range__track .input-range__label-container {
-    display: none;
-  }
-
-  // do not center min/max labels - otherwise the overflow slider sides
-  .input-range__label-container {
-    left: 0% !important;
-  }
-}
-
-.icvInputRange__container {
-  min-width: $euiSize * 10 !important; // !important needed for IE
 }