Slider: onAfterChange bug introduced in 8.6.5

Created on 15 Feb 2019  Â·  5Comments  Â·  Source: react-component/slider

Commit https://github.com/react-component/slider/commit/d9d3857998f69a03dc04663d07b3597fc4ff1217 seems to introduce a bug.

I'm using a Range component. When I first slide the left handle, and then click to change the left value, the onAfterChange callback is not called.

Steps:

  1. Drag left handle to second mark
  2. Click on first mark

I expect that the onAfterChange is triggered twice. But it's only triggered on step 1.

My code:

<Range
    max={4}
    defaultValue={[0, 4]}
    onAfterChange={([startIndex, endIndex]) => console.log(startIndex, endIndex)}
    marks={{
        0: { label: 'Start' },
        1: { label: '' },
        2: { label: 'Mid' },
        3: { label: '' },
        4: { label: 'End' },
    }}
    />

Most helpful comment

I guess this could be closed since the fix has been merged !

All 5 comments

Any updates on this?
I've also noticed this issue, it can be reproduced on the demo page as well, at the Basic Range,step=20, dots step, described here http://react-component.github.io/slider/examples/range.html

why would you expect onAfterChange to trigger twice? there are ppl complaining that it should trigger once lol
https://github.com/react-component/slider/issues/495

@kossel I think you misunderstood. onAfterChange isn't triggered at all when you change the left value of the slider by clicking on the step. You can check this as i said at the Basic Range,step=20, dots step, described here http://react-component.github.io/slider/examples/range.html.

Steps to reproduce:

  1. Open the console in DevTools since a log is added when onAfterChange is triggered
  2. Move the right value at the right end with drag and drop
  3. Change the left value by clicking on the steps

Thanks!

Hello, I fixed this issue on 547.
The handle variable on the state references the index of the handle component.. and the left handle is index 0. So if you have this:

if (handle || force) {
    this.props.onAfterChange(this.getValue());
}

It won't trigger the event.

Just adding the !== null (default value for handle) fixes it. Commit 2fa3c904...

if (handle !== null || force) {
    this.props.onAfterChange(this.getValue());
}

I hope someone can merge this !
Thanks

I guess this could be closed since the fix has been merged !

Was this page helpful?
0 / 5 - 0 ratings

Related issues

nmccrea-db picture nmccrea-db  Â·  5Comments

jeznag picture jeznag  Â·  6Comments

dvshur picture dvshur  Â·  3Comments

teggno picture teggno  Â·  3Comments

johnb8005 picture johnb8005  Â·  6Comments