[Slider][base][material][joy] Fix not draggable on the edge when `dis…

…ableSwap={true}` (#35998) Co-authored-by: ZeeshanTamboli <[email protected]>
mui · Jun 27, 2023 · 1aa3205 · 1aa3205
1 parent e9c7c7c
commit 1aa3205
Show file tree

Hide file tree

Showing 7 changed files with 30 additions and 3 deletions.
diff --git a/docs/pages/base-ui/api/use-slider.json b/docs/pages/base-ui/api/use-slider.json
@@ -81,6 +81,13 @@
       },
       "required": true
     },
+    "getThumbStyle": {
+      "type": {
+        "name": "(index: number) =&gt; object",
+        "description": "(index: number) =&gt; object"
+      },
+      "required": true
+    },
     "marks": { "type": { "name": "Mark[]", "description": "Mark[]" }, "required": true },
     "open": { "type": { "name": "number", "description": "number" }, "required": true },
     "range": { "type": { "name": "boolean", "description": "boolean" }, "required": true },

diff --git a/docs/translations/api-docs/use-slider/use-slider.json b/docs/translations/api-docs/use-slider/use-slider.json
@@ -28,6 +28,7 @@
     "getHiddenInputProps": "Resolver for the hidden input slot&#39;s props.",
     "getRootProps": "Resolver for the root slot&#39;s props.",
     "getThumbProps": "Resolver for the thumb slot&#39;s props.",
+    "getThumbStyle": "Resolver for the thumb slot&#39;s style prop.",
     "marks": "The marks of the slider. Marks indicate predetermined values to which the user can move the slider.",
     "open": "The thumb index for the current value when in hover state.",
     "range": "If <code>true</code>, the slider is a range slider when the <code>value</code> prop passed is an array.",

diff --git a/packages/mui-base/src/Slider/Slider.tsx b/packages/mui-base/src/Slider/Slider.tsx
@@ -94,6 +94,7 @@ const Slider = React.forwardRef(function Slider<RootComponentType extends React.
     ...props,
     marks: marksProp,
     disabled,
+    disableSwap,
     isRtl,
     defaultValue,
     max,
@@ -119,6 +120,7 @@ const Slider = React.forwardRef(function Slider<RootComponentType extends React.
     values,
     trackOffset,
     trackLeap,
+    getThumbStyle,
   } = useSlider({ ...partialOwnerState, rootRef: forwardedRef });
 
   const ownerState: SliderOwnerState = {
@@ -272,7 +274,7 @@ const Slider = React.forwardRef(function Slider<RootComponentType extends React.
             })}
             style={{
               ...style,
-              pointerEvents: disableSwap && active !== index ? 'none' : undefined,
+              ...getThumbStyle(index),
               ...thumbProps.style,
             }}
           >

diff --git a/packages/mui-base/src/useSlider/useSlider.ts b/packages/mui-base/src/useSlider/useSlider.ts
@@ -657,6 +657,13 @@ export default function useSlider(parameters: UseSliderParameters): UseSliderRet
     };
   };
 
+  const getThumbStyle = (index: number) => {
+    return {
+      // So the non active thumb doesn't show its label on hover.
+      pointerEvents: active !== -1 && active !== index ? 'none' : undefined,
+    };
+  };
+
   const getHiddenInputProps = <TOther extends EventHandlers = {}>(
     otherHandlers: TOther = {} as TOther,
   ): UseSliderHiddenInputProps<TOther> => {
@@ -710,5 +717,6 @@ export default function useSlider(parameters: UseSliderParameters): UseSliderRet
     trackLeap,
     trackOffset,
     values,
+    getThumbStyle,
   };
 }
diff --git a/packages/mui-base/src/useSlider/useSlider.types.ts b/packages/mui-base/src/useSlider/useSlider.types.ts
@@ -212,6 +212,12 @@ export interface UseSliderReturnValue {
   getThumbProps: <TOther extends EventHandlers = {}>(
     otherHandlers?: TOther,
   ) => UseSliderThumbSlotProps<TOther>;
+  /**
+   * Resolver for the thumb slot's style prop.
+   * @param index of the currently moved thumb
+   * @returns props that should be spread on the style prop of thumb slot
+   */
+  getThumbStyle: (index: number) => object;
   /**
    * The marks of the slider. Marks indicate predetermined values to which the user can move the slider.
    */

diff --git a/packages/mui-joy/src/Slider/Slider.tsx b/packages/mui-joy/src/Slider/Slider.tsx
@@ -442,6 +442,7 @@ const Slider = React.forwardRef(function Slider(inProps, ref) {
     classes: classesProp,
     disabled,
     defaultValue,
+    disableSwap,
     isRtl,
     max,
     min,
@@ -471,6 +472,7 @@ const Slider = React.forwardRef(function Slider(inProps, ref) {
     values,
     trackOffset,
     trackLeap,
+    getThumbStyle,
   } = useSlider({ ...ownerState, rootRef: ref });
 
   ownerState.marked = marks.length > 0 && marks.some((mark) => mark.label);
@@ -617,7 +619,7 @@ const Slider = React.forwardRef(function Slider(inProps, ref) {
             })}
             style={{
               ...style,
-              pointerEvents: disableSwap && active !== index ? 'none' : undefined,
+              ...getThumbStyle(index),
               ...thumbProps.style,
             }}
           >

diff --git a/packages/mui-material/src/Slider/Slider.js b/packages/mui-material/src/Slider/Slider.js
@@ -569,6 +569,7 @@ const Slider = React.forwardRef(function Slider(inputProps, ref) {
     values,
     trackOffset,
     trackLeap,
+    getThumbStyle,
   } = useSlider({ ...ownerState, rootRef: ref });
 
   ownerState.marked = marks.length > 0 && marks.some((mark) => mark.label);
@@ -767,7 +768,7 @@ const Slider = React.forwardRef(function Slider(inputProps, ref) {
               })}
               style={{
                 ...style,
-                pointerEvents: disableSwap && active !== index ? 'none' : undefined,
+                ...getThumbStyle(index),
                 ...thumbProps.style,
               }}
             >