bug(mat-slider): Range slider works incorrect when max and min the same

[alex-matveev42]

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 user move Range slider from min point to max point or max point to min point(min equals max) user can't move points.

Reproduction

StackBlitz link: Steps to reproduce:

1. go to https://material.angular.io/components/slider/examples
2. move max point to min or min to max.
3. You should get for example this state.
4. try to move point

Expected Behavior

user can easily move points

Actual Behavior

user can't move

Environment

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

[wagnermaciel]

I was unable to reproduce this. Are you setting the slider min & max equal to each other or just moving the slider thumbs together?

https://github.com/angular/components/assets/25158423/51343079-72c4-4a2f-91e9-5fcf515ab73f

[brian-weasner]

I can reproduce, but not sure if this is expected behavior.

When the slider dots are stacked, the left half of the slider dot allows for sliding the min point and the right half of the slider dot allows moving the max point.

• When both are stacked all the way to the left, and clicking on the left half of the dot, the slider doesn't move in any direction.
• When both are stacked all the way to the right, and clicking on the right half of the dot, the slider doesn't move in any direction.
• When both are stacked not on the edges of the slider, clicking on the left half of the dot only moves the min dot to the left, and clicking on the right half of the dot only moves the max dot to the right.

[alex-matveev42]

please take a look. this issue happens time to time. sometimes I can, sometimes I can't https://github.com/angular/components/assets/133750432/a52423d4-0454-4c70-ba7d-25dda1f987b9

[brian-weasner]

As I mentioned, it's dependent on what part of the stacked dot you select.

Left side of stacked dots moves min, right side moves max.

• When both are stacked all the way to the right, and clicking on the right half of the dot, the max slider dot doesn't move in any direction because it cannot move to the right.

This seems to be expected behavior, but I agree that it feels wrong when the dots are all the way to the left or the right sides of the slider.

[alex-matveev42]

yes, it's feels wrong. because one point overlap another one. I change background-color and border-color for both(they totally different) and I can see that one point covered/overlapped second, so I would expect behavior like this - don't matter in which part of point you start moving - you can do this. So if min overlap max - I can move ONLY min and vice verse

[wagnermaciel]

I see. It seems like this can be handled by some special casing - if the slider thumbs are both set to the min or max value, make only one slider thumb selectable. I can probably take a look at this some time next week

[alex-matveev42]

@wagnermaciel Did you have time to take a look of this issue?

[wagnermaciel]

Unfortunately no. My time lately has been split on css token work & fixing a dialog issue :/ If someone wants to take a stab at this, I believe it should just involve handling this edge case here:

https://github.com/angular/components/blob/main/src/material/slider/slider-input.ts#L726

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}