title: Material UI Slider and Typescript onChange number | number[] type
body: <p>New to Typescript here. I have a Material UI <code>Slider</code> that I'd like to set my <code>age</code> state variable with, but I'm getting a Typescript error due to the typing of <code>age</code> being <code>number</code> and <code>onChange</code> value being <code>number | number[]</code>. How can I tell <code>onChange</code> to always expect a <code>number</code>?</p>
  <p>code:</p>
  <pre><code>      &lt;Slider
          defaultValue={25}
          step={1}
          min={0}
          max={100}
          valueLabelDisplay=&quot;auto&quot;
          onChange={handleAgeSliderChange}
        /&gt;
  </code></pre>
  <p>onChange: (use Redux store)</p>
  <pre><code>    const handleAgeSliderChange = (event:any, newValue: number | number[]) =&gt;{
          const new_inputs = { ...props.userInput, age: newValue}
          props.updateUserInputs(new_inputs)
      }
  </code></pre>
  <p>and the error:</p>
  <pre><code>  Types of property 'age' are incompatible.
      Type 'number | number[]' is not assignable to type 'number'.
        Type 'number[]' is not assignable to type 'number'.
  </code></pre>
  <p>EDIT: Some more details:</p>
  <p>in ActionCreators.tsx</p>
  <pre><code>export const updateUserInputs = (input: UserInputs) : ActionTypes.UserInputActions =&gt; ({
      type: ActionTypes.UPDATE_USER_INPUTS,
      payload: input
  })
  </code></pre>
  <p>in userinputs.tsx</p>
  <pre><code>const initialState: UserInputs = {
      age: 25, 
      ethnicity: &quot;white&quot;,
      country: &quot;US&quot;,
      smoking: false
  }
  
  export const userInputReducer = (
      state = initialState,
      action: ActionTypes.UserInputActions
    ) =&gt; {
      switch (action.type) {
        case ActionTypes.UPDATE_USER_INPUTS:
            const new_input = action.payload
            return {...state, userInput: new_input}
      default:
          return {...state}    
        }
    };
  </code></pre>
  <p>in types.tsx</p>
  <pre><code>export interface UserInputs {
    age: number;
    ethnicity: string;
    country: string;
    smoking: boolean;
  }
  </code></pre>