Clicking on the thumb produces inconsistent value

[foezahmed]

Description

Clicking on the different horizontal positions of the thumb div will produce different values based on slider position of that area.

In the above example, value 50 is expected after wherever click on that thumb.

I additionally looked into the code. Tried creating a separate onThumbClick(this.props.value[i]) props call in createOnKeyDown. But stopPropagation in pauseEvent not working resulting the onSliderClick to fire also.

I can prepare a PR if this propagation issue is resolved.

CodeSandbox

Code is here:

[foezahmed]

@stonebk, any feedback on this?

[viters]

@foezahmed

Currently, as workaround, you can ignore value from onSliderClick and pragmatically get value from slider ref in the onSliderClick handler.

[foezahmed]

Yes, doing it this way now. But there should be a consistent way of getting the click value of thumb. Tried to add the code but stopPropagation in pauseEvent not working resulting the onSliderClick to fire also. Looking for some help on that so can I can complete the PR.

[stonebk]

I think the problem here is that onSliderClick should not be firing because you are actually clicking on the thumb, not the slider. The value makes a lot more sense when you are actually clicking on the bar, where it is consistent with the thumb moving to that position.

[stonebk]

I looked into this a bit more and it seems like a bit of a weird callback (not sure what the original intent for this callback was). It just reports the value for the click position regardless of what the actual value of any thumbs are.

@foezahmed , curious, what are you using onSliderClick for?

[foezahmed]

I'm using this in a video seek bar and letting the user select a range. During the selection, I'm allowing the user to :

• On thumb move, seeking the video to that position to see the frame.
• On Click on any of the thumbs, seeking and showing where the video frame starts/ends. (This is where consistent click value from onSliderClick or onThumbClick is needed)

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.