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

material/src/components/slider/slider.js

Lines 563 to 565 in bc7833b

	var exactVal = percentToValue(positionToPercent(vertical ? ev.pointer.y : ev.pointer.x));
	var closestVal = minMaxValidator(stepValidator(exactVal));

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.