Slider - obtaining drag events

[a-gagnon]

Hi,
I noticed whenever a thumb is being dragged there is the iui-grabbing and iui-active classes that get added to the slider container and slider thumb div respectively. Is there a way to get a callback whenever the drag starts/ends? (The onChange might do the trick for dragEnd.)

My current workflow involves periodically updating the value of the slider (using a timer), and I would like to stop that while the cursor is being held by the user.

Thanks!
Alex

[mayank99]

Hi @a-gagnon,

Have you tried using the onUpdate prop? It gets called throughout the drag process. Something like this:

const [isDragging, setIsDragging] = React.useState(false);

return (
  <Slider
    // ...
    onUpdate={() => setIsDragging(true)}
    onChange={() => setIsDragging(false)}
  />
);

Also we forward the ref on our Slider, so you have access to the native html element where you can add all kinds of events.

[a-gagnon]

Thanks, that works! The old slider I'm replacing raised onUpdate whenever the value changed, programmatically or not. I'm glad to see this onUpdate works as one would expect!

[a-gagnon]

After some more testing, there is still one flaw in that logic. If the user clicks on the thumb but doesn't drag it along the rail, onUpdate does not get called. I tried supplying my own onPointerDown function using the thumbProps callback to get the same logic the activeThumbIndex uses, but it doesn't work. My function passed through the ...rest parameter at line 131 likely gets overwritten by the onPointerDown implementation at line 146.

[mayank99]

What would an ideal solution look like? We could merge user props in our event handlers, but that quickly spirals down and might still not cover all cases. /cc @iTwin/itwinui-react-1

diff --git a/src/core/Slider/Thumb.tsx b/src/core/Slider/Thumb.tsx
index d59b310c..739b794c 100644
--- a/src/core/Slider/Thumb.tsx
+++ b/src/core/Slider/Thumb.tsx
@@ -128,7 +128,6 @@ export const Thumb = (props: ThumbProps) => {
       {...tooltipProps}
     >
       <div
-        {...rest}
         data-index={index}
         ref={thumbRef}
         style={{ ...style, left: `${leftPercent}%` }}
@@ -143,12 +142,31 @@ export const Thumb = (props: ThumbProps) => {
         aria-valuenow={value}
         aria-valuemax={maxVal}
         aria-disabled={disabled}
-        onPointerDown={handlePointerDownOnThumb}
-        onKeyDown={handleOnKeyDown}
-        onFocus={() => setHasFocus(true)}
-        onBlur={() => setHasFocus(false)}
-        onMouseEnter={() => setIsHovered(true)}
-        onMouseLeave={() => setIsHovered(false)}
+        {...rest}
+        onPointerDown={(e) => {
+          thumbProps?.onPointerDown?.(e);
+          handlePointerDownOnThumb();
+        }}
+        onKeyDown={(e) => {
+          thumbProps?.onKeyDown?.(e);
+          handleOnKeyDown(e);
+        }}
+        onFocus={(e) => {
+          thumbProps?.onFocus?.(e);
+          setHasFocus(true);
+        }}
+        onBlur={(e) => {
+          thumbProps?.onBlur?.(e);
+          setHasFocus(false);
+        }}
+        onMouseEnter={(e) => {
+          thumbProps?.onMouseEnter?.(e);
+          setIsHovered(true);
+        }}
+        onMouseLeave={(e) => {
+          thumbProps?.onMouseLeave?.(e);
+          setIsHovered(false);
+        }}
       />
     </Tooltip>
   );

[a-gagnon]

I think this is the most flexible approach, but it does have its downsides, and I don't feel like my knowledge in UI component design is sufficient to properly answer this :) For my particular use-case, being able to pass a function that runs alongside setActiveThumbIndex within onThumbActivated would suffice, but it does feel too narrow of a fix.

If everything remains the same, it might be a good idea to remove the functions off the thumbProps type, eg:

  thumbProps?: (
    index: number,
  ) => Omit<
    React.HTMLAttributes<HTMLDivElement>,
    | 'onPointerDown'
    | 'onKeyDown'
    | 'onFocus'
    | 'onBlur'
    | 'onMouseEnter'
    | 'onMouseLeave'
  >;