Slider: Marks don't line up with center of thumb

[yellowfuse]

Dependencies check up

• I have verified that I use latest version of all @mantine/* packages

What version of @mantine/* packages do you have in package.json?

7.13.0

What package has an issue?

@mantine/core

What framework do you use?

Vite

In which browsers you can reproduce the issue?

All

Describe the bug

On a Slider with marks, the mark position and value don't correspond with the thumb position. This can be easily seen on one of the Slider examples on the Mantine website: https://mantine.dev/core/slider/#styles-api

If you try to position the center of the thumb on (or as closely as possible) the 20% mark, the value is 19%. If you try to position it on the 80% mark, the value is 79%.

It seems the mark is not aligned to the center of the thumb, but slightly to the left. This may be confusing to users who try to position the thumb on a mark.

If possible, include a link to a codesandbox with a minimal reproduction

No response

Possible fix

No response

Self-service

• I would be willing to implement a fix for this issue

[tarunsinghofficial]

Hi @yellowfuse, I would like to work on this issue, and would love to fix it.

[zhawzid-ottj]

fix is to remove the transform (line 181) in
mantine/packages/@mantine/core/src/components/Slider/Slider.module.css

mantine/packages/@mantine/core/src/components/Slider/Slider.module.css

Line 181 in b090266

transform: translateX(calc(var(--slider-size) / -2));