[Slider][material][base] Allow generic value type to narrow onChange value type

docs/data/joy/components/button-group/SeparatorButtonGroup.tsx

@@ -16,7 +16,7 @@ export default function SeparatorButtonGroup() {
         max={360}
         valueLabelDisplay="on"
         valueLabelFormat={(value) => `hsl(${value} 100% 50%)`}
-        onChange={(event, newValue) => setHue(newValue as number)}
+        onChange={(event: Event, newValue: number) => setHue(newValue)}
       />
       <ButtonGroup
         variant="plain"

docs/data/joy/components/divider/DividerChildPosition.tsx

@@ -6,7 +6,7 @@ import Slider from '@mui/joy/Slider';
 import Sheet from '@mui/joy/Sheet';
 
 export default function DividerChildPosition() {
-  const [position, setPosition] = React.useState<number | Array<number>>(50);
+  const [position, setPosition] = React.useState<number>(50);
   return (
     <Box sx={{ width: '100%' }}>
       <Stack spacing={1} sx={{ fontSize: 'sm' }}>
@@ -23,7 +23,7 @@ export default function DividerChildPosition() {
         step={1}
         valueLabelDisplay="on"
         valueLabelFormat={(value) => `${value}%`}
-        onChange={(event, value) => setPosition(value)}
+        onChange={(event: Event, value: number) => setPosition(value)}
       />
     </Box>
   );

docs/data/joy/components/divider/DividerChildPosition.tsx.preview

@@ -12,5 +12,5 @@
   step={1}
   valueLabelDisplay="on"
   valueLabelFormat={(value) => `${value}%`}
-  onChange={(event, value) => setPosition(value)}
+  onChange={(event: Event, value: number) => setPosition(value)}
 />

docs/data/joy/components/slider/RangeSlider.tsx

@@ -9,8 +9,8 @@ function valueText(value: number) {
 export default function RangeSlider() {
   const [value, setValue] = React.useState<number[]>([20, 37]);
 
-  const handleChange = (event: Event, newValue: number | number[]) => {
-    setValue(newValue as number[]);
+  const handleChange = (event: Event, newValue: number[]) => {
+    setValue(newValue);
   };
 
   return (

docs/data/material/components/slider/MusicPlayerSlider.tsx

@@ -119,7 +119,7 @@ export default function MusicPlayerSlider() {
           min={0}
           step={1}
           max={duration}
-          onChange={(_, value) => setPosition(value as number)}
+          onChange={(_: Event, value: number) => setPosition(value)}
           sx={{
             color: theme.palette.mode === 'dark' ? '#fff' : 'rgba(0,0,0,0.87)',
             height: 4,

docs/pages/base-ui/api/use-slider.json

@@ -14,8 +14,8 @@
     "name": { "type": { "name": "string", "description": "string" } },
     "onChange": {
       "type": {
-        "name": "(event: Event, value: number | number[], activeThumb: number) => void",
-        "description": "(event: Event, value: number | number[], activeThumb: number) => void"
+        "name": "SingleValueChange | MultipleValuesChange | DefaultOnChange",
+        "description": "SingleValueChange | MultipleValuesChange | DefaultOnChange"
       }
     },
     "onChangeCommitted": {

docs/src/components/productMaterial/MaterialHero.tsx

@@ -175,7 +175,7 @@ function SlideDemo() {
       <Slider
         aria-labelledby="temperature-slider"
         value={value}
-        onChange={(_, newValue) => setValue(newValue as number[])}
+        onChange={(_: Event, newValue: number[]) => setValue(newValue)}
       />
       <LocalFireDepartment
         fontSize="small"

packages/mui-base/src/useSlider/useSlider.ts

@@ -254,7 +254,7 @@ export default function useSlider(parameters: UseSliderParameters): UseSliderRet
         value: { value, name },
       });
 
-      onChange(clonedEvent, value, thumbIndex);
+      onChange(clonedEvent, value as number & number[], thumbIndex);
     });
 
   const range = Array.isArray(valueDerived);

packages/mui-base/src/useSlider/useSlider.types.ts

@@ -1,6 +1,10 @@
 import * as React from 'react';
 import { EventHandlers } from '../utils';
 
+export type SingleValueChange = (event: Event, value: number, activeThumb: number) => void;
+export type MultipleValuesChange = (event: Event, value: number[], activeThumb: number) => void;
+export type DefaultOnChange = (event: Event, value: number | number[], activeThumb: number) => void;
+
 export interface UseSliderParameters {
   /**
    * The id of the element containing a label for the slider.
@@ -56,8 +60,9 @@ export interface UseSliderParameters {
    * **Warning**: This is a generic event not a change event.
    * @param {number | number[]} value The new value.
    * @param {number} activeThumb Index of the currently moved thumb.
+   *
    */
-  onChange?: (event: Event, value: number | number[], activeThumb: number) => void;
+  onChange?: SingleValueChange | MultipleValuesChange | DefaultOnChange;
   /**
    * Callback function that is fired when the `mouseup` is triggered.
    *

packages/mui-material-next/src/Slider/Slider.types.ts

@@ -1,6 +1,11 @@
 import * as React from 'react';
 import { SlotComponentProps } from '@mui/base';
-import { Mark } from '@mui/base/useSlider';
+import {
+  DefaultOnChange,
+  Mark,
+  MultipleValuesChange,
+  SingleValueChange,
+} from '@mui/base/useSlider';
 import { SxProps } from '@mui/system';
 import { OverridableStringUnion, OverrideProps, OverridableComponent } from '@mui/types';
 import { Theme } from '../styles';
@@ -108,7 +113,7 @@ export interface SliderTypeMap<D extends React.ElementType = 'span', P = {}> {
      * @param {number | number[]} value The new value.
      * @param {number} activeThumb Index of the currently moved thumb.
      */
-    onChange?: (event: Event, value: number | number[], activeThumb: number) => void;
+    onChange?: SingleValueChange | MultipleValuesChange | DefaultOnChange;
     /**
      * Callback function that is fired when the `mouseup` is triggered.
      *

packages/mui-material/src/Slider/Slider.d.ts

@@ -1,6 +1,11 @@
 import * as React from 'react';
 import { SlotComponentProps } from '@mui/base';
-import { Mark } from '@mui/base/useSlider';
+import {
+  DefaultOnChange,
+  Mark,
+  MultipleValuesChange,
+  SingleValueChange,
+} from '@mui/base/useSlider';
 import { SxProps } from '@mui/system';
 import { OverridableStringUnion } from '@mui/types';
 import { Theme } from '../styles';
@@ -151,7 +156,7 @@ export interface SliderTypeMap<D extends React.ElementType = 'span', P = {}> {
      * @param {number | number[]} value The new value.
      * @param {number} activeThumb Index of the currently moved thumb.
      */
-    onChange?: (event: Event, value: number | number[], activeThumb: number) => void;
+    onChange?: SingleValueChange | MultipleValuesChange | DefaultOnChange;
     /**
      * Callback function that is fired when the `mouseup` is triggered.
      *