Dont use context in hooks

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

@@ -1,6 +1,52 @@
 {
   "parameters": {
+    "active": { "type": { "name": "number", "description": "number" }, "required": true },
+    "axis": { "type": { "name": "Axis", "description": "Axis" }, "required": true },
+    "changeValue": {
+      "type": {
+        "name": "(valueInput: number, index: number, event: React.KeyboardEvent | React.ChangeEvent) => void",
+        "description": "(valueInput: number, index: number, event: React.KeyboardEvent | React.ChangeEvent) => void"
+      },
+      "required": true
+    },
+    "isRtl": { "type": { "name": "boolean", "description": "boolean" }, "required": true },
+    "largeStep": {
+      "type": { "name": "number", "description": "number" },
+      "default": "10",
+      "required": true
+    },
+    "max": { "type": { "name": "number", "description": "number" }, "required": true },
+    "min": { "type": { "name": "number", "description": "number" }, "required": true },
+    "orientation": {
+      "type": {
+        "name": "'horizontal' | 'vertical'",
+        "description": "'horizontal' | 'vertical'"
+      },
+      "default": "'horizontal'",
+      "required": true
+    },
+    "scale": {
+      "type": {
+        "name": "(value: number) => number",
+        "description": "(value: number) => number"
+      },
+      "required": true
+    },
+    "setOpen": {
+      "type": { "name": "(index: number) => void", "description": "(index: number) => void" },
+      "required": true
+    },
+    "step": {
+      "type": { "name": "number | null", "description": "number | null" },
+      "default": "1",
+      "required": true
+    },
+    "values": {
+      "type": { "name": "readonly number[]", "description": "readonly number[]" },
+      "required": true
+    },
     "aria-label": { "type": { "name": "string", "description": "string" } },
+    "aria-labelledby": { "type": { "name": "string", "description": "string" } },
     "aria-valuetext": { "type": { "name": "string", "description": "string" } },
     "disabled": { "type": { "name": "boolean", "description": "boolean" } },
     "getAriaLabel": {
@@ -16,6 +62,7 @@
       }
     },
     "id": { "type": { "name": "string", "description": "string" } },
+    "name": { "type": { "name": "string", "description": "string" } },
     "onBlur": {
       "type": { "name": "React.FocusEventHandler", "description": "React.FocusEventHandler" }
     },
@@ -27,7 +74,8 @@
     },
     "rootRef": {
       "type": { "name": "React.Ref<Element>", "description": "React.Ref<Element>" }
-    }
+    },
+    "tabIndex": { "type": { "name": "number", "description": "number" } }
   },
   "returnValue": {
     "getRootProps": {

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

@@ -166,8 +166,8 @@
     },
     "subitems": {
       "type": {
-        "name": "Map<any, SliderThumbMetadata>",
-        "description": "Map<any, SliderThumbMetadata>"
+        "name": "Map<string, SliderThumbMetadata>",
+        "description": "Map<string, SliderThumbMetadata>"
       },
       "required": true
     },

docs/translations/api-docs/use-slider-thumb/use-slider-thumb.json

@@ -1,16 +1,28 @@
 {
   "hookDescription": "",
   "parametersDescriptions": {
+    "active": { "description": "The index of the active thumb." },
     "aria-label": { "description": "The label for the input element." },
     "aria-valuetext": {
       "description": "A string value that provides a user-friendly name for the current value of the slider."
     },
+    "axis": { "description": "The orientation of the slider." },
     "getAriaLabel": {
       "description": "Accepts a function which returns a string value that provides a user-friendly name for the input associated with the thumb"
     },
     "getAriaValueText": {
       "description": "Accepts a function which returns a string value that provides a user-friendly name for the current value of the slider. This is important for screen reader users."
-    }
+    },
+    "largeStep": {
+      "description": "The large step value of the slider when incrementing or decrementing while the shift key is held, or when using Page-Up or Page-Down keys. Snaps to multiples of this value."
+    },
+    "max": { "description": "The maximum allowed value of the slider." },
+    "min": { "description": "The minimum allowed value of the slider." },
+    "orientation": { "description": "The component orientation." },
+    "step": {
+      "description": "The step value of the slider when incrementing or decrementing. It will snap to multiples of this value. Decimal values are supported."
+    },
+    "values": { "description": "The value(s) of the slider" }
   },
   "returnValueDescriptions": {
     "getThumbStyle": { "description": "Resolver for the thumb slot's style prop." }

docs/translations/api-docs/use-slider/use-slider.json

@@ -63,6 +63,9 @@
     "step": {
       "description": "The step value of the slider when incrementing or decrementing. It will snap to multiples of this value. Decimal values are supported."
     },
+    "subitems": {
+      "description": "A map containing all the Thumb components registered to the slider"
+    },
     "values": { "description": "The value(s) of the slider" }
   }
 }

packages/mui-base/src/Slider/Root/SliderRoot.types.ts

@@ -275,7 +275,10 @@ export interface UseSliderReturnValue {
    * @default 1
    */
   step: number | null;
-  subitems: Map<any, SliderThumbMetadata>;
+  /**
+   * A map containing all the Thumb components registered to the slider
+   */
+  subitems: Map<string, SliderThumbMetadata>;
   tabIndex?: number;
   /**
    * The value(s) of the slider

packages/mui-base/src/Slider/SliderOutput/SliderOutput.tsx

@@ -21,11 +21,12 @@ const SliderOutput = React.forwardRef(function SliderOutput(
 
   const render = renderProp ?? defaultRender;
 
-  const { disabled, dragging, ownerState, values } = useSliderContext();
+  const { disabled, dragging, ownerState, subitems, values } = useSliderContext();
 
   const mergedRef = useRenderPropForkRef(render, forwardedRef);
 
   const { getRootProps } = useSliderOutput({
+    subitems,
     rootRef: mergedRef,
   });
 

packages/mui-base/src/Slider/SliderOutput/SliderOutput.types.ts

@@ -1,9 +1,9 @@
 import { BaseUIComponentProps } from '../../utils/BaseUI.types';
-import { SliderRootOwnerState } from '../Root/SliderRoot.types';
+import { SliderRootOwnerState, UseSliderReturnValue } from '../Root/SliderRoot.types';
 
 export interface SliderOutputProps extends BaseUIComponentProps<'output', SliderRootOwnerState> {}
 
-export interface UseSliderOutputParameters {
+export interface UseSliderOutputParameters extends Pick<UseSliderReturnValue, 'subitems'> {
   'aria-live'?: React.AriaAttributes['aria-live'];
   /**
    * Ref to the root slot's DOM element.

packages/mui-base/src/Slider/SliderOutput/useSliderOutput.ts

@@ -1,7 +1,6 @@
 'use client';
 import * as React from 'react';
 import { mergeReactProps } from '../../utils/mergeReactProps';
-import { useSliderContext } from '../Root/SliderProvider';
 import { UseSliderOutputParameters, UseSliderOutputReturnValue } from './SliderOutput.types';
 /**
  *
@@ -10,9 +9,7 @@ import { UseSliderOutputParameters, UseSliderOutputReturnValue } from './SliderO
  * - [useSliderOutput API](https://mui.com/base-ui/api/use-slider-output/)
  */
 function useSliderOutput(parameters: UseSliderOutputParameters): UseSliderOutputReturnValue {
-  const { 'aria-live': ariaLive = 'off', rootRef } = parameters;
-
-  const { subitems } = useSliderContext();
+  const { 'aria-live': ariaLive = 'off', rootRef, subitems } = parameters;
 
   const outputFor = Array.from(subitems.values()).reduce((acc, item) => {
     return `${acc} ${item.inputId}`;

packages/mui-base/src/Slider/SliderThumb/SliderThumb.tsx

@@ -34,15 +34,48 @@ const SliderThumb = React.forwardRef(function SliderThumb(
 
   const mergedRef = useRenderPropForkRef(render, forwardedRef);
 
-  const { ownerState, active: activeIndex } = useSliderContext();
+  const {
+    active: activeIndex,
+    'aria-labelledby': ariaLabelledby,
+    axis,
+    changeValue,
+    disabled: contextDisabled,
+    isRtl,
+    largeStep,
+    max,
+    min,
+    name,
+    orientation,
+    ownerState,
+    scale,
+    setOpen,
+    step,
+    tabIndex,
+    values,
+  } = useSliderContext();
 
   const { getRootProps, getThumbInputProps, disabled, index } = useSliderThumb({
-    disabled: disabledProp,
+    'aria-labelledby': ariaLabelledby,
+    active: activeIndex,
+    axis,
+    changeValue,
+    disabled: disabledProp || contextDisabled,
     id,
-    onFocus,
+    isRtl,
+    largeStep,
+    max,
+    min,
+    name,
     onBlur,
+    onFocus,
     onKeyDown,
+    orientation,
     rootRef: mergedRef,
+    scale,
+    setOpen,
+    step,
+    tabIndex,
+    values,
   });
 
   const styleHooks = React.useMemo(

packages/mui-base/src/Slider/SliderThumb/SliderThumb.types.ts

@@ -1,10 +1,10 @@
 import { BaseUIComponentProps } from '../../utils/BaseUI.types';
-import { SliderRootOwnerState } from '../Root/SliderRoot.types';
+import { SliderRootOwnerState, UseSliderReturnValue } from '../Root/SliderRoot.types';
 
 export interface SliderThumbOwnerState extends SliderRootOwnerState {}
 
 export interface SliderThumbProps
-  extends Omit<UseSliderThumbParameters, 'rootRef'>,
+  extends Partial<Omit<UseSliderThumbParameters, 'rootRef'>>,
     BaseUIComponentProps<'span', SliderThumbOwnerState> {
   onPointerLeave?: React.PointerEventHandler;
   onPointerOver?: React.PointerEventHandler;
@@ -13,7 +13,25 @@ export interface SliderThumbProps
   onKeyDown?: React.KeyboardEventHandler;
 }
 
-export interface UseSliderThumbParameters {
+export interface UseSliderThumbParameters
+  extends Pick<
+    UseSliderReturnValue,
+    | 'active'
+    | 'aria-labelledby'
+    | 'axis'
+    | 'changeValue'
+    | 'isRtl'
+    | 'largeStep'
+    | 'max'
+    | 'min'
+    | 'name'
+    | 'orientation'
+    | 'scale'
+    | 'setOpen'
+    | 'step'
+    | 'tabIndex'
+    | 'values'
+  > {
   /**
    * The label for the input element.
    */

packages/mui-base/src/Slider/SliderThumb/useSliderThumb.ts

@@ -5,7 +5,6 @@ import { useId } from '../../utils/useId';
 import { visuallyHidden } from '../../utils/visuallyHidden';
 import { useCompoundItem } from '../../useCompound';
 import { valueToPercent } from '../utils';
-import { useSliderContext } from '../Root/SliderProvider';
 import { SliderThumbMetadata } from '../Root/SliderRoot.types';
 import { UseSliderThumbParameters, UseSliderThumbReturnValue } from './SliderThumb.types';
 
@@ -30,35 +29,29 @@ function getNewValue(
  */
 export function useSliderThumb(parameters: UseSliderThumbParameters) {
   const {
+    active: activeIndex,
     'aria-label': ariaLabel,
     'aria-valuetext': ariaValuetext,
-    disabled: disabledProp = false,
-    getAriaLabel,
-    getAriaValueText,
-    id: idParam,
-    rootRef: externalRef,
-  } = parameters;
-
-  const {
-    active: activeIndex,
     'aria-labelledby': ariaLabelledby,
     axis,
     changeValue,
     disabled,
+    getAriaLabel,
+    getAriaValueText,
+    id: idParam,
     isRtl,
     largeStep,
     max,
     min,
     name,
     orientation,
+    rootRef: externalRef,
     scale,
     setOpen,
     step,
     tabIndex,
     values: sliderValues,
-  } = useSliderContext();
-
-  const isThumbDisabled = disabledProp || disabled;
+  } = parameters;
 
   const thumbId = useId(idParam);
   const thumbRef = React.useRef<HTMLElement>(null);
@@ -159,7 +152,7 @@ export function useSliderThumb(parameters: UseSliderThumbParameters) {
         style: {
           ...getThumbStyle(),
         },
-        tabIndex: tabIndex ?? (isThumbDisabled ? undefined : 0),
+        tabIndex: tabIndex ?? (disabled ? undefined : 0),
       });
     },
     [
@@ -169,7 +162,7 @@ export function useSliderThumb(parameters: UseSliderThumbParameters) {
       idParam,
       index,
       isRtl,
-      isThumbDisabled,
+      disabled,
       largeStep,
       max,
       min,
@@ -242,8 +235,8 @@ export function useSliderThumb(parameters: UseSliderThumbParameters) {
       getRootProps,
       getThumbInputProps,
       index,
-      disabled: isThumbDisabled,
+      disabled,
     }),
-    [getRootProps, getThumbInputProps, index, isThumbDisabled],
+    [getRootProps, getThumbInputProps, index, disabled],
   );
 }

packages/mui-base/src/Slider/SliderTrack/SliderTrack.tsx

@@ -23,9 +23,39 @@ const SliderTrack = React.forwardRef(function SliderTrack(
 
   const mergedRef = useRenderPropForkRef(render, forwardedRef);
 
-  const { disabled, dragging, ownerState } = useSliderContext();
+  const {
+    areValuesEqual,
+    disabled,
+    dragging,
+    getFingerNewValue,
+    handleValueChange,
+    onValueCommitted,
+    max,
+    min,
+    ownerState,
+    setActive,
+    setDragging,
+    setOpen,
+    setValueState,
+    subitems,
+    values,
+  } = useSliderContext();
 
   const { getRootProps } = useSliderTrack({
+    areValuesEqual,
+    disabled,
+    dragging,
+    getFingerNewValue,
+    handleValueChange,
+    onValueCommitted,
+    max,
+    min,
+    setActive,
+    setDragging,
+    setOpen,
+    setValueState,
+    subitems,
+    values,
     rootRef: mergedRef,
   });