[slider] Accept readonly array for the value prop

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

@@ -20,7 +20,7 @@ export interface SliderOwnerState extends SliderProps {
   focusedThumbIndex: number;
 }
 
-export interface SliderOwnProps<Value extends number | number[]> {
+export interface SliderOwnProps<Value extends number | readonly number[]> {
   /**
    * The label of the slider.
    */
@@ -317,18 +317,19 @@ export interface SliderOwnProps<Value extends number | number[]> {
 export interface SliderTypeMap<
   RootComponent extends React.ElementType = 'span',
   AdditionalProps = {},
-  Value extends number | number[] = number | number[],
+  Value extends number | readonly number[] = number | number[],
 > {
   props: AdditionalProps & SliderOwnProps<Value>;
   defaultComponent: RootComponent;
 }
 
-export type SliderComponent<Value extends number | number[]> = OverridableComponent<
+export type SliderComponent<Value extends number | readonly number[]> = OverridableComponent<
   SliderTypeMap<'span', {}, Value>
 >;
 
 export type SliderType = SliderComponent<number> &
   SliderComponent<number[]> &
+  SliderComponent<readonly number[]> &
   SliderComponent<number | number[]>;
 
 export interface SliderValueLabelProps extends React.HTMLAttributes<HTMLSpanElement> {

packages/mui-material/src/Slider/Slider.spec.tsx

@@ -82,6 +82,12 @@ function testOnChange() {
   onChange={(event, value: number[]) => {}}
   onChangeCommitted={(event, value: number[]) => {}}
 />;
+const values = [5, 10] as const;
+<Slider
+  value={values}
+  onChange={(event, value: readonly number[]) => {}}
+  onChangeCommitted={(event, value: readonly number[]) => {}}
+/>;
 
 const CustomComponent: React.FC<{ stringProp: string; numberProp: number }> =
   function CustomComponent() {