I am using the material ui Slider Library and adding Thumbcomponent prop doesn't allow you to drag the slider around from the thumb on mobile, however, the slider does allow you to start dragging after tapping on a mark and resuming sliding that way. It seems that the thumb becomes static after tapping it.
I am trying to draw lines between the thumbs of three sliders by adding a ref to each thumb and running getBoundingClientRect() on each ref in the componentdidUpdate of the parent holding the sliders. I have add some additional hacky code to account for the fact that the sliders are located on a drawer. I do intend for the thumb to be an image as well.
Can find the demo on https://codesandbox.io/s/trial-map-svg-lines-8xluo
I tried removing the ref from the span (in Thumbcomponent, line 54) so that the custom location code goes away but the issue still prevails leading me to believe, its not the ref that is causing the issue and nor is it the custom code.
On desktop, this behavior doesn't occur but I've tried running this on android, IOS and the chrome dev tools mobile simulation where it does.