When I add border and border radius styling to the thumbs, you can see the the tracks sticking out behind the thumbs.
I did see other people have raised similar issues before but not sure if it was ever properly addressed? I think that if you change the width calculation of the tracks to begin/end at the center of the thumb it should solve this problem. I attached screenshots of how long the tracks are when you inspect them in dev tools. Tracks seem to be calculated to start from beginning of a thumb to end of the next thumb instead of middle to middle which if implemented I believe will fix the overlap
Edit:
Just managed to "offset" the thumbs by adding margin-left: -1px which works for me but I still think the tracks width calculation should be amended
Description
When I add border and border radius styling to the thumbs, you can see the the tracks sticking out behind the thumbs.
I did see other people have raised similar issues before but not sure if it was ever properly addressed? I think that if you change the width calculation of the tracks to begin/end at the center of the thumb it should solve this problem. I attached screenshots of how long the tracks are when you inspect them in dev tools. Tracks seem to be calculated to start from beginning of a thumb to end of the next thumb instead of middle to middle which if implemented I believe will fix the overlap
I also read in this issue applying offset to the thumbs as a potential work around. Any suggestions on how to apply that? https://github.com/zillow/react-slider/issues/242
Edit: Just managed to "offset" the thumbs by adding
margin-left: -1pxwhich works for me but I still think the tracks width calculation should be amendedCodeSandbox