bug(Slider): Does Not Render Slider Thumb at Correct Position

[thatcort]

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 setting a step value on the slider, the slider thumb does not respect the value it receives and only renders at step positions.

Reproduction

StackBlitz link: https://stackblitz.com/edit/components-issue-bcgmbo?file=src%2Fapp%2Fexample-component.html Steps to reproduce:

1. Add a slider with a step attribute
2. Set the value on the slider thumb to a non-step value

Expected Behavior

The thumb should render at the precise position of the value input. The step input should constrain user input to only be able to drag the thumb to step values, but not constrain rendering of programmatically set values.

Actual Behavior

The thumb renders at a step value, but not the actual input value.

Environment

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

[thatcort]

Right, but this is not the expected behavior (as a user):

• When interacting with the slider the value should be rounded to the nearest step position.
• The slider should render the thumb at the precise value location.

This way if the value is not at a step position it will render correctly and accurately show the set value. But if the user interacts with it the next value position will be correctly rounded to a step value.

[thatcort]

To justify this requested behavior:

I have an application where there are two ways of setting a value. The slider provides rough adjustment with 8 steps. There is another interface for fine adjustment that can be used if necessary. If the user sets a value using the fine adjustment UI, then I want the slider to correctly represent that value by drawing the dot between step locations at the correct position. Right now it appears that the fine adjustment has no impact on the value.

This could be fixed by changing the step rounding to only happen on user input.

[thatcort]

Hi @topdev658 , I don't follow your last comment. Do you need changes to the reproduction code?

[thatcort]

I used the StackBlitz starter suggested by GitHub when creating this ticket. I'm not sure how else to create it. Any advice is appreciated

[thatcort]

Please, by all means! Feel free to make any changes you like, or fork and do something new. I really appreciate you looking into this!

[wagnermaciel]

Hi, sorry for the delay here. @topdev658 is correct, this is the desired/intended behavior. The mat-slider is built directly on top of a native html <input type="range" /> and the browser does not allow users to set a value that does not align with the step.

I created a demo to illustrate this: https://stackblitz.com/edit/components-issue-vfm2ua?file=src%2Fapp%2Fexample-component.html

[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.}