Skip to content

bug(mat-slider): Pointer/Hand Cursor is Shown when Hovering a Disabled Slider #31306

Open
@Pyrallux

Description

@Pyrallux

Is this a regression?

  • Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

When hovering a mat-slider marked as disabled that is parent to an input element using the matSliderThumb directive, the cursor still shows as a "pointer/hand." This situation can commonly occur in patterns using a mat-slider with an input child in a form, potentially misleading the user into believing the slider is operable despite being disabled.

Reproduction

Steps to reproduce:

  1. Create a mat-slider element and a child input element with the matSliderThumb tag.
  2. Mark the mat-slider as disabled

See Example @ StackBlitz Link Here

Expected Behavior

When the disabled slider is hovered, "default" cursor is displayed, indicating it is inoperable.

Image

Actual Behavior

When a diabled cursor is hovered, the "hand/pointer" cursor is displayed.

Image

Environment

  • Angular: 19.2.1 + 18.2.8 (StackBlitz)
  • Material: 19.2.2
  • Browser(s): Firefox 139.0.1, Chrome 137
  • Operating System: Windows

Metadata

Metadata

Assignees

No one assigned

    Labels

    P2The issue is important to a large percentage of users, with a workaroundarea: material/slider

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions