Slider `onChangeEnd` callback does not update with state changes, when component is controlled

[danieledelgiudice]

Dependencies check up

• I have verified that I use latest version of all @mantine/* packages

What version of @mantine/* packages do you have in package.json?

^7.17.2

What package has an issue?

@mantine/core

What framework do you use?

Vite

In which browsers you can reproduce the issue?

Chrome

Describe the bug

It looks like the Slider component’s onChangeEnd callback may be using a memoized version of the function that is bound during the initial render and not updating it when the component re-renders with new props or state.

This causes a scenario where, even if the onChangeEnd handler depends on a state variable and is recreated correctly (e.g., using useCallback with the appropriate dependencies), it still seems to log the initial state instead of the updated one.

Interestingly, making the Slider uncontrolled (by removing the value and onChange props) appears to fix the issue, which suggests the problem might be related to how the slider manages controlled props.

Additionally, when controlling the slider using arrow keys on the keyboard, the updated callback reference is used and the component works as expected. The issue seems to occur specifically when interacting with the slider via mouse clicks.

Additional issue – Hot Module Replacement (HMR)

Another side effect of this behavior is that hot module replacement (HMR) is broken. When updating the onChangeEnd callback during development, the new handler is not used unless the component is unmounted and remounted or the page is manually refreshed.

Steps to reproduce:

1. Create a Slider component with value and onChange props to control its value.
2. Pass a callback function to the onChangeEnd prop that logs a state variable.
3. Update the state variable by clicking the button.
4. Interact via mouse events with the slider to trigger the onChangeEnd callback.
5. Observe that the logged state remains stuck at the initial value, even though the callback function should reflect the updated state.

Here’s a minimal example demonstrating the issue:

import React, { useState, useCallback } from 'react';
import { Slider } from '@mantine/core';

function Demo() {
  const [value, setValue] = useState(0);
  const [state, setState] = useState(10);

  const handleChangeEnd = useCallback(() => {
    console.log('state', state);
  }, [state]);

  return (
    <Stack>
      <Slider
        value={value}
        onChange={setValue}
        onChangeEnd={handleChangeEnd}
      />
      <Button
        type='button'
        onClick={() => setState(prev => prev + 1)}
      >
        Increase state ({state})
      </Button>
    </Stack>
  );
}

Expected behavior:

The onChangeEnd callback should reflect the latest value of state on each render, as per standard React behavior.

Actual behavior:

The onChangeEnd callback logs the initial value of state and does not update even after the state changes.

If possible, include a link to a codesandbox with a minimal reproduction

https://codesandbox.io/p/sandbox/mantine-react-template-forked-w3jvvz

Possible fix

I took a look at the relevant files in the repository to try and get a better understanding of where the issue might be coming from. However, since I’m not very familiar with the internal workings of the Mantine codebase, I wasn’t able to figure out the root cause. Hopefully, someone with more knowledge of the project will be able to identify what’s going on here.

Self-service

• I would be willing to implement a fix for this issue

[Han5991]

I found a workaround for this issue. When I add an empty marks array to the Slider, the onChangeEnd callback works correctly and captures the latest state:

<Slider
  marks={[]} // Adding even an empty marks array fixes the issue
  value={state}
  onChange={handleChange}
  onChangeEnd={handleChangeEnd}
/>

With this change, the onChangeEnd callback consistently receives the current state value, even when it changes between slider interactions. This suggests the issue might be related to how callbacks are captured in the internal implementation when the marks prop is present vs absent.

[Han5991]

@rtivital
Can I fix it?

[rtivital]

Sure, you are welcome to submit a PR with a fix

[Han5991]

This is not an issue with the Mantine Slider component

What appears to be a problem with the onChangeEnd handler in the Mantine Slider component is actually expected behavior in React's event handling system.

Expected Behavior Explanation

This is the standard way React's event system and closures work together:

1. When a component renders, event handlers capture the state values that exist at render time
2. During mouse drag operations, the initially captured handler is used throughout the entire interaction
3. This behavior is consistent across React and is not specific to the Mantine Slider component

Why It Works with Keyboard Events

Keyboard events work differently because:

• Each keyboard interaction triggers a new event processing cycle
• The latest handler is used for each separate keyboard event
• This creates the illusion that keyboard navigation "works correctly" with state updates

Implementation Considerations

When designing components that interact with external state during drag operations:

1. Use the key prop to force remounting when dependent state changes
2. Use useRef to maintain references to current state values
3. Design your application flow to not require state updates during drag operations

This behavior is a fundamental aspect of how React's event system works with closures and not a defect in the Mantine library.

cc : @rtivital

[rtivital]

Great, thanks for the research @Han5991!

[danieledelgiudice]

Thank you for taking the time to investigate this, @Han5991.
However, I don’t believe the findings fully capture the issue, so I’d like to reopen this.

There are two distinct problems here:

1. (Main Issue) onChangeEnd Callback Never Updates

The Slider component’s onChangeEnd callback is bound only on the initial render and then never updates. The initial state it captures is the only one that will ever be used for the lifetime of the component, regardless of state changes or re-renders. More importantly, even modifying the callback code itself during development doesn’t update it. Hot module reloading doesn’t work, and the old callback remains in use until the page is manually refreshed.

This is clearly not how React is expected to behave. Other callbacks like onChange don’t exhibit this issue, further suggesting that something is off in how onChangeEnd is managed.

2. (Separate Issue) Closures Not Updating Mid-Drag

The second issue, where closures do not update mid-drag, is separate and simply a result of how the useMove hook is implemented. It attaches event callbacks directly to the DOM element on mousedown, instead of using refs to always call the latest callback. While it can be argued whether this is a valid design choice, I believe it’s unrelated to the primary issue.

---

To clarify: this report is about issue 1—onChangeEnd never updates, breaking state updates and HMR.
I’ve created a sandbox that shows how the Slider component and the useMove hook (which Slider uses internally) differ in how they manage onChangeEnd and the underlying onScrubEnd. You can see that the behavior aligns with what I described above.

https://codesandbox.io/p/devbox/mantine-react-template-forked-w2z5m4?workspaceId=ws_WyiY9ozsNCg7ZFQfcEN7do

[Han5991]

@danieledelgiudice

After reviewing the reported issue, I discovered that the onChangeEnd callback was not updating after the initial render.

This problem occurred in the internal implementation of the Slider component. While the onChange callback was properly updating the state through the useUncontrolled hook, the onChangeEnd callback was not.

To solve this issue, I used the following approach:

1. Created a useRef to store the onChangeEnd callback
2. Used useEffect to update the ref value whenever the callback changes
3. Modified the event handler to always reference the latest value from the ref

By applying this pattern:

• The latest callback function is always called even after state changes
• Hot Module Reloading (HMR) works as expected
• Works predictably when used with useCallback in user code

This fix follows the common pattern for event handling and closure behavior in React, ensuring that external event listeners always use the most recent function reference.

Solution Implemented

• Added a ref to store the latest onChangeEnd callback:

  const onChangeEndRef = useRef(onChangeEnd);

• Used useEffect to keep the ref updated when the callback changes:

  useEffect(() => {
    onChangeEndRef.current = onChangeEnd;
  }, [onChangeEnd]);

• Created separate callback handlers that use the ref:

  const handleScrubEnd = useCallback(() => {
    if (!disabled && onChangeEndRef.current) {
      onChangeEndRef.current(finalValue);
    }
  }, [disabled, marks, restrictToMarks]);
  
  const callOnChangeEnd = useCallback((value: number) => {
    if (!disabled && onChangeEndRef.current) {
      onChangeEndRef.current(value);
    }
  }, [disabled]);

• Modified all places that call onChangeEnd to use these handlers instead

Benefits

• Always uses the latest callback function reference
• Works correctly with HMR during development

This fix ensures the Slider component behaves as expected with up-to-date state values in the onChangeEnd callback and properly supports code changes during development.

cc @rtivital
I would like to request that this issue be reopened.