Slider sometimes glitches and cannot be dragged

[datvm]

What is affected?

Component

Description

Please see the following clip:

https://github.com/material-components/material-web/assets/6388546/bec0ee16-d927-442c-8e15-9f9af5ba0a2a

Apparently it happens when user selects a text nearby, then somehow drag too close to the selected text (I can't find out the exact reason that causes this issue consistently but I can encounter this issue every now and then while using our web apps). After the glitch happens, user can no longer drag the slider but it does moves a little bit after the initial click.

Reproduction

See above

Workaround

The issue can only be fixed when user unselects or selects another text.

Is this a regression?

No or unsure. This never worked, or I haven't tried before.

Affected versions

1.0.0

Browser/OS/Node environment

Microsoft Edge Version 118.0.2088.61 (Official build) (64-bit)

[datvm]

Update: I found out it can happen without any text selection as well though I think it may occurred due to the labeled:

https://github.com/material-components/material-web/assets/6388546/2473337a-ce73-4bdc-af1a-e6c45c68fba2

I find it's easier to reproduce using a <md-slider labeled> as well.

[asyncliz]

Hi! Can you provide a https://lit.dev/playground reproduction link? We may need to set user-select: none somewhere

[datvm]

Here you go Lit playground. It's kinda frustrated because I can't really pinpoint the cause. My guess is that I dropped some text into the slider.

Uploading Recording 2023-10-24 184203.mp4…

[asyncliz]

Is it Edge only? Does it reproduce in Chrome as well? Also which platform is this, Windows?

[datvm]

Yes I tested on Chrome as well and can reproduce it. However it doesn't seem to happen on Firefox, I gave up after a minute or two.

And yes it's Windows 11 Pro.

https://github.com/material-components/material-web/assets/6388546/28497e22-8542-4e88-b578-348c8ae4bed0