Slider thumb misaligned with ticks

[vegardlarsen]

Before you start...

• Have you updated your dependencies? You might be using an old version of the library.
• 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

1. Visit test page
2. Look for the Slider with ticks.
3. 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