primitives: [Slider] onValueCommit not being called properly

Same issue with the storybook. For what it’s worth, I’m on an M1, latest OSX & Chrome, and using the trackpad.

I’m on an M1, latest OSX & Chrome, so the only diff would be trackpad?

I just tried on the trackpad rather than using my mouse and I can reproduce it! That’s very strange that trackpad vs. mouse would make a difference…

At least now I know how to reproduce it now, so I can look into it 🙂

Thanks!

Adding a “onLostPointerCapture” handler seems to fix the issue.

Bumping this… This is a pretty obvious bug and renders this essential component useless in most applications due to the inconsistency.

I seem to have solved this too by adding a onLostPointerCapture hander to commit the value but it sure is alarming that this issue continues to persist.

Hey everyone, we are also having this issue with onValueCommit not being called properly. In our case, we are using two thumbs and a minStepsBetweenThumbs of 0. The onValueCommit function is not called when the right thumb gets dragged all the way to the left. It works the other way around though. This is easily reproducible and a reproduction is available here in this sandbox.

Ok, well that shows it has nothing to do with the iframe, thanks. However, I’m still struggling to reproduce it or understand how you are doing it 😀

One thing to note is that onValueCommit will only trigger is the value has actually changed, but from what I can see (although tricky with just watching a video) it looks like you are changing it.

Could you try logging the value you receive in onValueCommit and also logging the value in onValueChange and reproduce?

Upon further investigation, I discovered that the onPointerUp event fails to trigger when rapidly moving the slider outside of the document. Consequently, the onValueCommit props is not invoked since they rely on the onPointerUp event.

My temporary workaround made:

const Slider = () => {
  const [value, setValue] = useState();
  const [commitedValue, setCommitedValue] = useState();

  const handleValueCommit = (vals) => {
     setCommitedValue(vals);

     // Make Commit
  };
}

<ReactSlider.Root
  value={value}
  onValueChange={setValue}
  onValueCommit={handleValueCommit}

  onPointerLeave={() => {
    // `onPointerLeave` always fired
    // Avoid redundant commits
    if (commitValue[0] !== value[0] || commitValue[1] !== value[1]) {
setCommitedValue(vals);
      // Make Commit
    }
  }}
>

Hope it helps! @benoitgrelard @vctormb