Material-components-web: MDC-Slider in MDC-dialog thumb container positioning

[JordyvA]

Hi all,

I've a problem with the MDC-slider inside a MDC-dialog. The slider is not positioning on the right spot because of the MDC-dialog I think. The width of the complete slider with the track markers is right. The only thing is that the thumb is not on the right markers. The situation:

| = marker

• = slider
  0 = thumb

|------------------------------0------|-------------------------------------| (On position 1 - first par of bar is colored)

|-------------------------------------|----------------------0--------------| (On position 2 - bar is fully colored)

When I resize the window a little, the slider thumbs are correct on top of the markers. Is it possible that the slider keeps track of the parent as well? So when the parent is resizing (dialog), the thumbs are replaced as well? If I use a setTimeout after showing the dialog, and creating the slider inside that timeout, it's working well.

[yeelan0319]

Hi @jordyboytjuh , could you provide a codepen to reproduce this bug so that we can better nail it down? Thanks!

[JordyvA]

Hi @yeelan0319 , Thanks for the response. I've made a codepen of the issue. The thumbs are not placed on the right position on init. After resizing the window, the thumbs are fixed again.

https://codepen.io/anon/pen/BYLXEp

[JordyvA]

Something new on this issue? @yeelan0319

[evgeniysharapov]

I have the same issue and I can attest to the fact that resizing the window fixes discrete slider in the dialog.

[danielweck]

Same problem inside mdc-temporary-drawer, except resizing the window in order to fix this is not an option. UPDATE: resizing the does in fact fix the slider's thumb, which is otherwise totally stuck on one side when inside a drawer.

[danielweck]

I updated my comment above, as resizing the window does in fact help.

[danielweck]

I solved this by invoking slider.layout() in an MDCTemporaryDrawer:open event callback.

[sbryan]

FYI, found another use case where this marker/thumb/track is not properly rendered if it's container is not initially shown (The <details/> contents slot defaults to display: none until/unless it is "open".

Here's a Stackblitz project that demonstrates the issue when used inside <details/> elements.

As noted by others above, resizing the window/view seems to fix the problem. While there are workarounds (manually invoke the sliders layout() method, this is still a bug since there are now at least 3 reasonable and common use cases that reliably reproduce the issue.