slider

slider copied to clipboard

Hey folks. Thanks for this super sweet slider component.

We're encountering an issue in which the slider moves slightly when it receives focus. In the following GIF, I am simply tabbing through the input elements. Each slider is accompanied by a number input box. When I tab out of a number input box, focus is being given to the slider on the next row. We can see each slider move slightly as this happens.

---

In the following GIF, we can see in the console that the <Slider> component is having it's dragging state attribute set to true when it receives focus:

---

Finally, this GIF shows that when the slider has focus, switching out of the browser window and back in causes the slider to move each time:

---

I investigated our own code thoroughly. There is not much to it, and even when it is all commented out, this behavior is still displayed. It is apparent that when the slider receives focus, the <Slider> component's onChange handler is being triggered with a slightly increased value.

I suspected it was incorrectly capturing some sort of mouse event. I found that positioning my mouse cursor to the left or right of the slider made no difference in the behavior. The slider handle always moves to the right the same amount.

For now we are going to work around the problem by removing the element from the tab flow, and eliminating any other code we have that gives the slider focus, but any further insight into this would be super.

Cheers.

We fix this issue. The problem happens when one changes the provided css file rc-slider/assets/index.css, specifically the class rc-slider-handle. If in this file one where to change the width of the handle (in our case we change to 24px both the width and height to have a bigger handle), the margin-left needs also to be changed to exactly minus the half of the width.

In the case that anyone else come across this same issue they can use the workaround above, but we still think that this is a bug that could be easily fixed and make better an already wonderful tool.

Bests.

We fix this issue. The problem happens when one changes the provided css file rc-slider/assets/index.css, specifically the class rc-slider-handle. If in this file one where to change the width of the handle (in our case we change to 24px both the width and height to have a bigger handle), the margin-left needs also to be changed to exactly minus the half of the width.

Doesn't work for me. I changed the width and height to be 14px and margin-left to -7px but it still happens 😞

In the case that anyone else come across this same issue they can use the workaround above, but we still think that this is a bug that could be easily fixed and make better an already wonderful tool.

Upvote 👍

I had a related very strange bug. If I seeked, changed browser tabs, then went back to the tab with the seekbar, onChange would be fired with the value that I had seeked to even though the value had changed since then. The result was seeking back in the audio that was playing when clicking back to the original tab. Changing the margin-left to exactly 1/2 the width fixed the issue. I have no idea how I would have figure that out if I hadn't seen this. I'm using version 8.6.4

I have the same issue, but I didn't change styles for htmlClass rc-slider-handle, I just import styles from 'rc-slider/assets/index.css'. The DOM node with class 'rc-slider-handle' has 14px width and height and has -7px margin-left. And when this node get focused rc-slider slightly change the input value without apparent reasons.

I am also having this issue. I have overridden the style for rc-slider-handle as such: .rc-slider-handle { background-color: white; border: #ff4c00 6px solid; top: 1px; width: 20px; height: 20px; margin-left: -10px; }

Even with the margin-left negative half the width the issue persists. The slider value changes when the control is tabbed to or when the control has focus, you click in another window and come back.

If I set margin-left to 0px it appears to solve the problem. However, it breaks the keyboard arrow right to increment functionality, causing it to jump by more than the step value.