Extract useSliderTrack and account for offset in getFingerNewValue

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

@@ -5,6 +5,7 @@ import { resolveClassName } from '../utils/resolveClassName';
 import { useRenderPropForkRef } from '../utils/useRenderPropForkRef';
 import { useSliderContext } from './SliderContext';
 import { TrackProps } from './Slider.types';
+import { useSliderTrack } from '../useSlider2/useSliderTrack';
 
 function defaultRender(props: React.ComponentPropsWithRef<'div'>) {
   return <div {...props} />;
@@ -18,12 +19,15 @@ const SliderTrack = React.forwardRef(function SliderTrack(
 
   const render = renderProp ?? defaultRender;
 
-  const { getTrackProps, ownerState } = useSliderContext('Track');
-
   const mergedRef = useRenderPropForkRef(render, forwardedRef);
 
-  const trackProps = getTrackProps({
-    ref: mergedRef,
+  const { ownerState } = useSliderContext('Track');
+
+  const { getRootProps } = useSliderTrack({
+    rootRef: mergedRef,
+  });
+
+  const trackProps = getRootProps({
     className: resolveClassName(className, ownerState),
     ...otherProps,
   });

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

@@ -134,9 +134,6 @@ export interface UseSliderReturnValue {
   getRootProps: (
     externalProps?: React.ComponentPropsWithRef<'div'>,
   ) => React.ComponentPropsWithRef<'div'>;
-  getTrackProps: (
-    externalProps?: React.ComponentPropsWithRef<'div'>,
-  ) => React.ComponentPropsWithRef<'div'>;
   getOutputProps: (
     externalProps?: React.ComponentPropsWithRef<'output'>,
   ) => React.ComponentPropsWithRef<'output'>;
@@ -161,6 +158,17 @@ export interface UseSliderReturnValue {
   compoundComponentContextValue: CompoundComponentContextValue<any, ThumbMetadata>;
   dragging: boolean;
   disabled: boolean;
+  getFingerNewValue: (args: {
+    finger: { x: number; y: number };
+    move?: boolean;
+    offset?: number;
+    referenceRef?: React.RefObject<HTMLElement>;
+  }) => { newValue: number | number[]; activeIndex: number; newValuePercent: number };
+  handleValueChange: (
+    value: number | number[],
+    activeThumb: number,
+    event: React.SyntheticEvent | Event,
+  ) => void;
   isRtl: boolean;
   largeStep: number;
   /**
@@ -172,15 +180,21 @@ export interface UseSliderReturnValue {
    */
   min: number;
   name?: string;
+  onValueCommitted?: (value: number | number[], event: React.SyntheticEvent | Event) => void;
   /**
    * The thumb index for the current value when in hover state.
    */
   open: number;
   orientation: 'horizontal' | 'vertical';
   scale: (value: number) => number;
+  setActive: (activeIndex: number) => void;
+  setDragging: (isDragging: boolean) => void;
   setOpen: (index: number) => void;
+  setValueState: (newValue: number | number[]) => void;
   step?: number | null;
   tabIndex?: number;
+  thumbRefs: (HTMLElement | null)[];
+  valueState: number | readonly number[];
   value: ReadonlyArray<number>;
 }