bug(Slider): Tick marks don't align with the position of the thumb

[jonancastelo]

Is this a regression?

• [ ] Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

There are some values of "min", "max" and "step" together with "showTickMars" that make tick marks to dm't be aligned with the position of the thumb.

In the shared stackblitz example can be seen that:

• The last tick mark is not displayed in the end of the slider.
• As you approach the last point with the thumb the distance between thumb and tick marks is bigger .

Reproduction

StackBlitz link: https://stackblitz.com/edit/components-issue-t6k1kc Steps to reproduce:

1. Visually appreciate that last tick doesn't coincide with end of slider.
2. Move the thumb to appreciate that as you approach to the end th distance between thumb and tick marks is bigger.

Expected Behavior

• First and last tick mars should be displayed in the start and end of the slider.
• The thumb should coincide with tick marks.

Actual Behavior

• The last tick mark is not displayed in the end of the slider.
• As you approach the last point with the thumb the distance between thumb and tick marks is bigger .

Environment

• Angular: 16.2.1
• CDK/Material: 16.2.1
• Browser(s): Chrome
• Operating System (e.g. Windows, macOS, Ubuntu): Mac

[jonancastelo]

I have discovered where the misunderstanding is.

In slider.ts can be seen in the method updateTickMarkTrackUI comments, that the maximum reachable value is different from the maximum value set by the user.

In MatSlider documentation however, it says that max is the maximum value that the slider can have.

The last assumption may hold true behind the scenes, but for the user, the maximum value that the slider can reach is the set max value. Consequently, this explanation could lead to misunderstanding for the user.

I propose 2 possible solutions:

• Clarify in the docs that the maximum reachable value is different from the maximum value set by the user with a little example like in the method updateTickMarkTrackUI comments.
• Redevelop the slider with next algorithm. Once redeveloped the result will be tick marks always coinciding with thumb and with the showing value:

  // Calculate number of ticks
  numberOfTicks = Math.floor( (max - min) / step)
  // Calculate html input range min and max (minReachable and maxReachable respectively)
  minReachable =  min;
  maxReachable = min + (numberOfTicks * step);

I could develop myself and make a pull request if you agree.

[GiftLanga]

Hey @jonancastelo are you going to work on this issue, or can I?

[jonancastelo]

Hi @GiftLanga, as there is no interest by the angular team I will not develop. Perhaps you can, good luck