Slider thumb misaligned with ticks - Githubissues

Tropix126 / fluent-svelte

A faithful implementation of Microsoft's Fluent Design System in Svelte.

https://fluent-svelte.vercel.app

MIT License

624 stars 28 forks source link

Slider thumb misaligned with ticks #59

Open vegardlarsen opened 1 year ago

vegardlarsen commented 1 year ago

Before you start...

[X] Have you updated your dependencies? You might be using an old version of the library.
[X] Have you checked for an existing issue on this topic? If there is one, post a comment on it instead.

What browsers are you seeing the problem on?

Firefox, Chrome, Microsoft Edge

Description

The slider thumb is misaligned with the ticks. The problem increases with the distance from the center point of the slider, in both directions.

The problem disappears if you override the following CSS rule:

.slider .slider.orientation-horizontal .slider-thumb {
    inset-inline-start: calc(var(--fds-slider-percentage)) !important;
}

Steps To Reproduce

Visit test page
Look for the Slider with ticks.
Slide it around. The value of the slider is 18 when the thumb visually aligns with the center of the tick.

Expected behavior

The slider thumb should visually align exactly with the ticks.

Relevant Assets