[Slider] onChange Typing is broken if wrapping Slider Component and reexporting Props

Since @material-ui/core v4.9.5, the Slider component appears to not be wrappable due to the change in the Typings, especially for the onChange prop.

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

When attempting to wrap and re-export a Slider component, the onChange prop now appears to be typed as ((event: React.ChangeEvent<{}>, value: number | number[]) => void) & ((event: React.FormEvent<HTMLSpanElement>) => void). The latter part of that Typing (the & ((event: React.FormEvent<HTMLSpanElement>) => void) effectively breaks any function being passed into the onChange prop, as it would seem that a function can’t satisfy both types here. As a result, there are TypeScript errors with onChange.

Expected Behavior 🤔

I believe the typing for onChange should be just the part preceding the &, that is the (event: React.ChangeEvent<{}>, value: number | number[]) => void. That would allow for standard change handlers to be passed through.

Steps to Reproduce 🕹

https://codesandbox.io/s/goofy-chatterjee-1hz7t

Steps:

1. Create a new component that wraps and implements the Slider and SliderProps from Material-UI
2. Use that component and pass in an event handler function for onChange
3. See that the onChange event is marked as invalid. The full error text from TS is Type '(_: any, value: any) => void' is not assignable to type '((event: ChangeEvent<{}>, value: number | number[]) => void) & ((event: FormEvent<HTMLSpanElement>) => void)'. Type '(_: any, value: any) => void' is not assignable to type '(event: FormEvent<HTMLSpanElement>) => void'.ts(2322)

Context 🔦

I’m trying to upgrade our project from 4.8.3 to 4.9.7 to stay up to date, but this issue has caused me to be unable to move forward, as I can’t seem to define onChange events that will pass TS scrutiny. (FWIW, everything works as it should as far as functionality, this is just some weird typing issue.)

Your Environment 🌎

Tech	Version
Material-UI	v4.9.7
React	16.12
Browser	Chrome 80
TypeScript	3.7.4
MacOS	10.15.3

[gerhat]

Thanks @joshkarges. In my case I needed to also have some custom props so this is my solution:

import React from 'react'
import MuiSlider, { SliderTypeMap } from '@material-ui/core/Slider'
import { SliderProps as MuiSliderProps } from '@material-ui/core/Slider'
import { OverridableComponent } from '@material-ui/core/OverridableComponent'
import Typography from '@material-ui/core/Typography'

interface SliderProps extends Omit<MuiSliderProps, 'onChange'> {
  /**
   * The label of the slider
   */
  label?: string
}

export const Slider: OverridableComponent<SliderTypeMap<SliderProps, 'span'>> =
  (props: SliderProps) => {
    const { label, ...restProps } = props
    return (
      <>
        {label && (
          <Typography variant="body1">
            {label}
          </Typography>
        )}
        <MuiSlider {...restProps} />
      </>
    )
  }

[joshkarges]

For those still on v4.x, this worked for me:

const MySlider: OverridableComponent<SliderTypeMap<{}, 'span'>> = (props) =>
  <Slider {...props} onChange={(evt, val) => console.log(val)}/>