mantinedev / mantine

A fully featured React components library
https://mantine.dev
MIT License
26.79k stars 1.9k forks source link

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

Closed yellowfuse closed 1 month ago

yellowfuse commented 1 month ago

Dependencies check up

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

tarunsinghofficial commented 1 month ago

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

zhawzid-ottj commented 1 month ago

fix is to remove the transform (line 181) in mantine/packages/@mantine/core/src/components/Slider/Slider.module.css https://github.com/mantinedev/mantine/blob/b0902662c103732e3861694f98d3024b3bb1988c/packages/%40mantine/core/src/components/Slider/Slider.module.css#L181