fix(material/slider): Aligns the tickmarks with the thumbs

[GiftLanga]

trafficstars

Uses flexbox to align the tickmarks with the thumbs

Fixes #29409.

[wagnermaciel]

Hey @GiftLanga! Thank you for this PR! I've been hoping to make this switch sometime since IMO it's much cleaner

I took a look at the changes and noticed a small visual issue where some tick marks appear to be stretching slightly depending on the screen size

Here's a screenshot of the problem

[GiftLanga]

Hey @GiftLanga! Thank you for this PR! I've been hoping to make this switch sometime since IMO it's much cleaner

I took a look at the changes and noticed a small visual issue where some tick marks appear to be stretching slightly depending on the screen size

Here's a screenshot of the problem

Okay, I'll take a look.

[GiftLanga]

Hey @GiftLanga! Thank you for this PR! I've been hoping to make this switch sometime since IMO it's much cleaner

I took a look at the changes and noticed a small visual issue where some tick marks appear to be stretching slightly depending on the screen size

Here's a screenshot of the problem

I ended up using clip-path to make the circles (not sure if it's the correct way to do things), because at 2px there are inconsistencies with the widths of the tick marks. Otherwise I would need to revert back to using the absolute positioning and translate.

/** Returns the translateX positioning for a tick mark based on it's index. */ _calcTickMarkTransform(index: number): string { // TODO(wagnermaciel): See if we can avoid doing this and just using flex to position these. const translateX = index * (this._tickMarkTrackWidth / (this._tickMarks.length - 1)); returntranslateX(${translateX}px; }

[wagnermaciel]

Closing as we ended up deciding to keep the absolute positioning and fixing the translateX in https://github.com/angular/components/pull/30329

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}