Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Tracks stick out behind the thumbs #281

Open
Avi-Cohen-Nehemia opened this issue Dec 2, 2022 · 0 comments
Open

Tracks stick out behind the thumbs #281

Avi-Cohen-Nehemia opened this issue Dec 2, 2022 · 0 comments

Comments

@Avi-Cohen-Nehemia
Copy link

Avi-Cohen-Nehemia commented Dec 2, 2022

Description

When I add border and border radius styling to the thumbs, you can see the the tracks sticking out behind the thumbs.
Screenshot 2022-12-02 110115

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
Screenshot 2022-12-02 110503

Screenshot 2022-12-02 110524

I also read in this issue applying offset to the thumbs as a potential work around. Any suggestions on how to apply that?
#242

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

CodeSandbox

Edit zillow/react-slider

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant