diff --git a/src-docs/src/views/theme/color/_contrast_slider.tsx b/src-docs/src/views/theme/color/_contrast_slider.tsx
index d3d959dfaa3..71cdd587c4c 100644
--- a/src-docs/src/views/theme/color/_contrast_slider.tsx
+++ b/src-docs/src/views/theme/color/_contrast_slider.tsx
@@ -21,7 +21,7 @@ import {
   ratingAll,
 } from './_contrast_utilities';
 
-type ContrastSlider = EuiFlexGroupProps & {
+type ContrastSlider = Omit<EuiFlexGroupProps, 'onChange'> & {
   contrastValue: EuiRangeProps['value'];
   showTextVariants: boolean;
   onChange?: (value: number | string, checked: boolean) => void;
diff --git a/src-docs/src/views/theme/color/contrast.tsx b/src-docs/src/views/theme/color/contrast.tsx
index b4b3efa0da3..2af0cc21feb 100644
--- a/src-docs/src/views/theme/color/contrast.tsx
+++ b/src-docs/src/views/theme/color/contrast.tsx
@@ -127,12 +127,8 @@ export default () => {
           <ContrastSlider
             contrastValue={contrastValue}
             showTextVariants={showTextVariants}
-            // @ts-ignore Help
-            onChange={(
-              sliderValue: React.SetStateAction<number>,
-              toggleChecked: React.SetStateAction<boolean>
-            ) => {
-              setContrastValue(sliderValue);
+            onChange={(sliderValue, toggleChecked) => {
+              setContrastValue(Number(sliderValue));
               setShowTextVariants(toggleChecked);
             }}
           />