Fixed pointer fill not being aligned in the center

[Specy]

Previously the fill thumb was not perfectly aligned to the center, i switched to flexbox to align it correctly. I've applied this fix to my website and thought to share here too so that it can be fixed for everyone.

Previous:

After:

[omgovich]

Hi @Specy! Thanks for the PR. How to catch the alignment bug? I saw that just once when used the browser zoom.

[Specy]

Hi @Specy! Thanks for the PR. How to catch the alignment bug? I saw that just once when used the browser zoom.

I see it everytime i enter the preview website, i'm using chrome 103 but had this issue for long. On firefox i can't reproduce. The fix i made works for all major browsers (not sure about IE but should work too)

[omgovich]

That's kinda weird. Are you sure you don't have zoom in your browser? I'm just trying to figure out the reason.

[Specy]

No i don't have any zoom on my browser, I think the issue is with the border, i've had issues in the past where borders caused the size calculations to be a bit messed up. An alternative to my fix which doesn't use flexbox is to use outline instead of border, because that doesn't change the sizing of the element, at that point the html can be simplified a bit too, and reduce the size of the package a little bit. Up to you which one you prefer, i can make the changes

[omgovich]

As far as I remember outline didn't work well with border-radius until recently.

[Specy]

Then i guess using flexbox would be the best approach

[omgovich]

Сan we keep 100% here so the design will remain the same? The component is used on dozens of thousands of projects. I wouldn't change their look.

[Specy]

I replaced flexbox with a simple border to the element instead, i noticed that the parent element could probably be removed but that might break compatibility with people who modified the styling.