Closed thatcort closed 6 months ago
Right, but this is not the expected behavior (as a user):
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.
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.
Hi @topdev658 , I don't follow your last comment. Do you need changes to the reproduction code?
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
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!
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
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.
Is this a regression?
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:
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