Material: slider(vertical): clicking slider sets value to 0 instead of value clicked when the scroll bar is not at the top

[Thaina]

I made a page with vertical md-slider inside table. Whenever I scroll down the page, the slider then cannot be clicked or dragged, it will reset it value to minimum like it cannot calculate its value

It seem like it use the page's scroll position to calculate its knob position or something. How can I fix this?

As the picture below. I scroll this page at the top. And then click on the green slider. The value become 61.5 normally

But when I just scroll down the page a bit, I try to click the same position on slider. It then become 0 just by clicked

[Splaktar]

Thank you for taking the time to submit this issue. However it does not follow our required issue template. A reproduction and reproduction steps are required. This also gives us information like what version of AngularJS and AngularJS Material are in use. We also need to know what browser and OS are being used.

This gives the team the information needed to investigate the bug.

[Splaktar]

If this is just a question, then there are better avenues for troubleshooting or asking for help with your app. These include Stack Overflow, Gitter, the AngularJS Material forums, etc.

[Thaina]

@Splaktar Apologize. This is sample of the bug

https://codepen.io/thaina/pen/NWKJVpV

Actually it not relate to table. Just repeat itself is already failed

https://codepen.io/thaina/pen/qBWvGXP

I am using jquery/3.4.1 angular.js/1.7.8 and angular-material/1.1.20 in chrome 77.0

[Thaina]

I have suspect that the problem came from the usage of ev.pointer

https://github.com/angular/material/blob/bc7833b45a5de5af3a01ba8445f7e24ca4311faa/src/components/slider/slider.js#L563-L565

Changing vertical ? ev.pointer.y : ev.pointer.x
to vertical ? ev.srcEvent.clientY : ev.srcEvent.clientX
fix this behaviour in my case

[Splaktar]

It looks like the use of ev.pointer.x/y was introduced in the first commit to add support for vertical sliders.

Note that this pointer object isn't an official part of the DOM event APIs. It's part of AngularJS Material's Gesture System.

In my tests with your CodePen, I see both ev.pointer.y and ev.pointer.x as defined. When you are fixing this, what values do you find for these versus ev.srcEvent.clientY and ev.srcEvent.clientX?

In one case here, I'm seeing the following:

ev.pointer.x: 954
ev.pointer.y: 838
ev.srcEvent.clientX: 954
ev.srcEvent.clientY: 273

So there is certainly a difference in these values.

[Thaina]

It looks like the use of ev.pointer.x/y was introduced in the first commit to add support for vertical sliders.

Note that this pointer object isn't an official part of the DOM event APIs. It's part of AngularJS Material's Gesture System.

In my tests with your CodePen, I see both ev.pointer.y and ev.pointer.x as defined. When you are fixing this, what values do you find for these versus ev.srcEvent.clientY and ev.srcEvent.clientX?

In one case here, I'm seeing the following:

ev.pointer.x: 954
ev.pointer.y: 838
ev.srcEvent.clientX: 954
ev.srcEvent.clientY: 273

So there is certainly a difference in these values.

I think the pointer value that angular send to slider is position relative to the whole page itself. While the comparing logic with slider use the value relative to current viewport. That is the cause of the bug. So there might be 3 ways to fix it

• send the value of mouse position relative to viewport (which I did in pull request with screenX)
• change logic in those function to use position of slider relative to the page instead
• don't calculate position but send mouse position relative to the slider element directly to those function

What should we use though? I just think the first one is easiest to get from ev object

[Thaina]

@Splaktar What do you think?

[Splaktar]

I don't have an opinion at this time. More investigation is needed and I won't be able to dig into this a lot deeper this month.