Space after last thumb

[petosiso]

Hi,

I am trying to implement react-slider with 6 marks. I can't place the last thumb at the end of the track - I have always space after the last thumb (see the image). How can I solve this?

Thank you!

[Sheldonfrith]

Having same issue. This is a duplicate of #210

[mat-sf]

The problem here is that browser returns different values from slider.getBoundingClientRect(), after resizing the browser (doesn't matter is it resized vertically or horizontally), it should return proper values and work as expected.

A temporary workaround, not perfect, but working, could be programmatically invoke browser resize:

useEffect(() => {
  window.dispatchEvent(new Event('resize'));
}, []);

From a package perspective, probably updating;

this.resize()

to

setTimeout(() => this.resize());

in line 374 in componentDidMount function should fix it in the package, but that would need a bit more tests.

[stonebk]

Hi @petosiso, can you please add a codesandbox that reproduces your issue? Without seeing your code, it's extremely difficult to debug.

You can create a sandbox by clicking below. Once you add that, we can reopen the issue.