Skip to content

bug(Slider): direction rtl doesn't work properly #32970

@xVinCe

Description

@xVinCe

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

In RTL direction, the thumb and path of the slider are still LTR and inconsistent with mouse behavior.

Reproduction

StackBlitz link: https://stackblitz.com/edit/d7q8e7hs?file=src%2Fexample%2Fslider-overview-example.html
Steps to reproduce:

  1. Add a mat-slider
  2. Add attribute dir="rtl" or direction: rtl; in css, to the mat-slider itself or an ancestor

Expected Behavior

Thumb should start at the right, and path should start filling from the right.
The thumb should follow the cursor when dragged.

Actual Behavior

In RTL direction, the thumb and path of the slider are LTR, but the mouse behavior is RTL.
I've tried a few older versions, it behaved the same in v17, in v13 the thumb is RTL but path LTR https://stackblitz.com/edit/mgmomp9y?file=src%2Fapp%2Fslider-overview-example.html

Environment

  • Angular: 21
  • CDK/Material: 21
  • Browser(s): Chrome
  • Operating System (e.g. Windows, macOS, Ubuntu): Windows

Metadata

Metadata

Assignees

No one assigned

    Labels

    area: material/slidergemini-triagedLabel noting that an issue has been triaged by geminineeds triageThis issue needs to be triaged by the team

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions