From 7b21978722a9e389de7308cdda78b6455da744ae Mon Sep 17 00:00:00 2001
From: maryia-lapata <mary.lopato@gmail.com>
Date: Tue, 17 Sep 2019 17:53:53 +0300
Subject: [PATCH 1/3] Get rid of ts-ignore

---
 .../public/components/common/range.tsx                    | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/common/range.tsx b/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/common/range.tsx
index 3ee05345524e6..490e90ed3c10f 100644
--- a/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/common/range.tsx
+++ b/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/common/range.tsx
@@ -51,14 +51,15 @@ function RangeOption<ParamName extends string>({
   });
 
   const onChangeHandler = (
-    { target: { valueAsNumber } }: React.ChangeEvent<HTMLInputElement>,
+    event: React.ChangeEvent<HTMLInputElement> | React.MouseEvent<HTMLButtonElement>,
     isValid: boolean
   ) => {
-    setStateValue(valueAsNumber);
+    const { target } = event as React.ChangeEvent<HTMLInputElement>;
+    setStateValue(target.valueAsNumber);
     setIsValidState(isValid);
 
     if (isValid) {
-      setValue(paramName, valueAsNumber);
+      setValue(paramName, target.valueAsNumber);
     }
   };
   return (
@@ -72,7 +73,6 @@ function RangeOption<ParamName extends string>({
         showInput={showInput}
         step={step}
         value={stateValue}
-        // @ts-ignore
         onChange={onChangeHandler}
       />
     </EuiFormRow>

From 1b661f17a60eef3cbf4c3621f8dca075cc956acf Mon Sep 17 00:00:00 2001
From: maryia-lapata <mary.lopato@gmail.com>
Date: Wed, 18 Sep 2019 10:29:33 +0300
Subject: [PATCH 2/3] Update range.tsx

---
 .../public/components/common/range.tsx                | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/common/range.tsx b/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/common/range.tsx
index 490e90ed3c10f..9d86bb04c8d56 100644
--- a/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/common/range.tsx
+++ b/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/common/range.tsx
@@ -51,15 +51,18 @@ function RangeOption<ParamName extends string>({
   });
 
   const onChangeHandler = (
-    event: React.ChangeEvent<HTMLInputElement> | React.MouseEvent<HTMLButtonElement>,
+    event: React.ChangeEvent<HTMLInputElement> | React.MouseEvent<HTMLButtonElement, MouseEvent>,
     isValid: boolean
   ) => {
-    const { target } = event as React.ChangeEvent<HTMLInputElement>;
-    setStateValue(target.valueAsNumber);
+    const {
+      currentTarget: { valueAsNumber },
+    } = event as React.ChangeEvent<HTMLInputElement>; // since we don't show ticks on EuiRange, the currentTarget will definitely be HTMLInputElement type, so we can cast the event directly.
+
+    setStateValue(valueAsNumber);
     setIsValidState(isValid);
 
     if (isValid) {
-      setValue(paramName, target.valueAsNumber);
+      setValue(paramName, valueAsNumber);
     }
   };
   return (

From 9bf8e3529e56241ecf4ef43a2af3dbe7195c6347 Mon Sep 17 00:00:00 2001
From: maryia-lapata <mary.lopato@gmail.com>
Date: Mon, 23 Sep 2019 18:07:45 +0300
Subject: [PATCH 3/3] Refactoring

---
 .../public/components/common/range.tsx                | 11 +++--------
 1 file changed, 3 insertions(+), 8 deletions(-)

diff --git a/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/common/range.tsx b/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/common/range.tsx
index 9d86bb04c8d56..a31b06fdbcc46 100644
--- a/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/common/range.tsx
+++ b/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/common/range.tsx
@@ -18,7 +18,7 @@
  */
 
 import React, { useState } from 'react';
-import { EuiFormRow, EuiRange } from '@elastic/eui';
+import { EuiFormRow, EuiRange, EuiRangeProps } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 
 interface RangeOptionProps<ParamName extends string> {
@@ -50,13 +50,8 @@ function RangeOption<ParamName extends string>({
     values: { min, max },
   });
 
-  const onChangeHandler = (
-    event: React.ChangeEvent<HTMLInputElement> | React.MouseEvent<HTMLButtonElement, MouseEvent>,
-    isValid: boolean
-  ) => {
-    const {
-      currentTarget: { valueAsNumber },
-    } = event as React.ChangeEvent<HTMLInputElement>; // since we don't show ticks on EuiRange, the currentTarget will definitely be HTMLInputElement type, so we can cast the event directly.
+  const onChangeHandler: EuiRangeProps['onChange'] = (event, isValid) => {
+    const { valueAsNumber } = event.target as HTMLInputElement; // since we don't show ticks on EuiRange, the target will definitely be HTMLInputElement type, so we can cast it directly.
 
     setStateValue(valueAsNumber);
     setIsValidState(isValid);