Skip to content
This repository has been archived by the owner on Aug 29, 2023. It is now read-only.

slider: position does not update correctly when both bound value and bound max are changed #9125

Closed
damianmerrick opened this issue Jul 25, 2016 · 2 comments
Assignees
Labels
has: Pull Request A PR has been created to address this issue P4: minor Minor issues. May not be fixed without community contributions. resolution: fixed type: bug
Milestone

Comments

@damianmerrick
Copy link

Actual Behavior:

  • What is the issue? * When I change both the bound value in an md-slider and the bound maximum, the slider position is not always updated correctly. When both value and max are increased, the position is incorrect until the value is changed again. However, when both are decreased, it seems to work ok.
  • What is the expected behavior? The slider position should be correct according to both the new value and the new maximum.

CodePen (or steps to reproduce the issue): *

  • CodePen Demo which shows your issue:Please see this Plunk.
  • Details: Change "Half value" from 2 to 3 as described in the HTML and observe the position change in the slider. Compare the position to what is obtained by changing the value alone with the numerical input.

Angular Versions: *

  • Angular Version: 1.5.3
  • Angular Material Version: 1.1.0-rc4

Additional Information:

  • Browser Type: * Google Chrome
  • Browser Version: * 51.0.2704.103 m
  • OS: * Windows 8.1 x64
  • Stack Traces: N/A
@ThomasBurleson ThomasBurleson added this to the - Backlog milestone Jul 25, 2016
@ThomasBurleson ThomasBurleson added the P4: minor Minor issues. May not be fixed without community contributions. label Jul 25, 2016
@xiagu
Copy link

xiagu commented Oct 3, 2016

I encountered this recently myself, and have a theory as to what exactly is going on:

When both the bound value and the bound max are changed in the same digest cycle, the value is updated first, such that min <= value <= max. Then the max is updated.

If the bound value is increased above the old max value, it will be capped at that. You can see this in the plunk linked above, where changing "Half value" from 2 to 3 will leave the slider displaying 5, the max when half-value is 2. (It should display 6.)

Doing the changes in different digest cycles (max first, then value) avoids the problem. That's why the $timeout workaround works.

sviams added a commit to sviams/material that referenced this issue Nov 9, 2017
Slider, which occurred when both model and either min and/or max values
were updated within the same digest cycle. This is due to the
$ngModelCtrl formatters kicking in and validating the view value before
the Slider directive $observer on the min and max attributes could fire.

Fixes angular#9125
@Splaktar Splaktar added the has: Pull Request A PR has been created to address this issue label Dec 19, 2017
@Splaktar Splaktar modified the milestones: - Backlog, 1.1.6 Dec 19, 2017
@Splaktar Splaktar modified the milestones: 1.1.6, 1.1.7 Jan 17, 2018
@Splaktar Splaktar modified the milestones: 1.1.7, 1.1.8 Feb 7, 2018
@Splaktar Splaktar modified the milestones: 1.1.8, 1.1.9 Mar 17, 2018
@Splaktar Splaktar assigned Splaktar and unassigned EladBezalel Apr 5, 2018
@Splaktar Splaktar changed the title md-slider position does not update correctly when both bound value and bound max are changed slider: position does not update correctly when both bound value and bound max are changed Apr 5, 2018
@Splaktar
Copy link
Member

Splaktar commented Apr 5, 2018

I reviewed the PR. If we can get the minor updates made soon, then this should be able to get into the next release.

sviams added a commit to sviams/material that referenced this issue Apr 5, 2018
…igest cycle

Fix out of sync state between model and view value that occurs in Slider when both model
and either min and/or max values are updated within the same digest cycle.
This is due to the $ngModelCtrl formatters kicking in and validating the view value before
the Slider directive $observer on the min and max attributes can fire.

Fixes angular#9125
tinayuangao pushed a commit that referenced this issue Apr 10, 2018
…igest cycle (#10980)

Fix out of sync state between model and view value that occurs in Slider when both model
and either min and/or max values are updated within the same digest cycle.
This is due to the $ngModelCtrl formatters kicking in and validating the view value before
the Slider directive $observer on the min and max attributes can fire.

Fixes #9125
chmelevskij pushed a commit to chmelevskij/material that referenced this issue Jun 19, 2018
…igest cycle (angular#10980)

Fix out of sync state between model and view value that occurs in Slider when both model
and either min and/or max values are updated within the same digest cycle.
This is due to the $ngModelCtrl formatters kicking in and validating the view value before
the Slider directive $observer on the min and max attributes can fire.

Fixes angular#9125
Splaktar pushed a commit that referenced this issue Jul 31, 2018
…igest cycle (#10980)

Fix out of sync state between model and view value that occurs in Slider when both model
and either min and/or max values are updated within the same digest cycle.
This is due to the $ngModelCtrl formatters kicking in and validating the view value before
the Slider directive $observer on the min and max attributes can fire.

Fixes #9125
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
has: Pull Request A PR has been created to address this issue P4: minor Minor issues. May not be fixed without community contributions. resolution: fixed type: bug
Projects
None yet
Development

No branches or pull requests

5 participants