Skip to content
This repository has been archived by the owner on Sep 5, 2024. It is now read-only.

md-slider: Appearance not updated properly when bound value changes #1210

Closed
maxee opened this issue Jan 16, 2015 · 5 comments
Closed

md-slider: Appearance not updated properly when bound value changes #1210

maxee opened this issue Jan 16, 2015 · 5 comments
Assignees
Milestone

Comments

@maxee
Copy link

maxee commented Jan 16, 2015

I got some strange behavior with the md-slider component. If the bound value changes, the slider position doesn't get updated immediatly. Bizzarely, if I open the GoogleChrome-Dev-Tools and close them again, the value updates instantly.

Unlike the md-slider, the input field which is bound to the same value, updates properly.

<md-input-container>
  <label>Input</label>
  <input type="text" ng-change="myfunc()" ng-model="devices[key].Properties.MyProp" />
</md-input-container>

<md-slider ng-change="myfunc()" ng-model="devices[key].Properties.MyProp" min="0" max="100" aria-label="lbl"></md-slider>

Update:
It seems that the above issue occures if the bound value is not a number but a string.
However its the question why a string value works as well after some time or by opening the Dev-Console and closing it afterwards.

@maxee
Copy link
Author

maxee commented Jan 18, 2015

After looking into it another time, I found out that the binding indeed updates correctly.
The correct value gets assigned, but the slider fails to adapt its appearance, as you can see in this screenshot:
material-slider

The small blue strip is at its correct location (100), but the circle isn't (0). By opening and closing the Chrome-Dev-Tools the circle updates it's position to position 100.

@maxee maxee changed the title md-slider: Binding not updated properly md-slider: Appearance not updated properly when bound value changes Jan 18, 2015
@ThomasBurleson ThomasBurleson modified the milestone: 0.7.1 Jan 19, 2015
@medaamarnadh
Copy link

Yes . I have the same problem .
It is working fine in browser. When i was build as a cordova application .
The slider has the same problem in android tablet

@PaulMougel
Copy link
Contributor

Same issue here: the md-track component is displayed correctly, but not the md-thumb.
From my experience, this happens when the slider is in a <md-tab> component, but only when the tab where the slider belongs is not displayed on the first render. Here is a Plunker. If the page is resized, then the md-thumb is repositioned correctly.

untitled
(Please excuse me for the flicker)

@ThomasBurleson
Copy link
Contributor

I added

.md-tab-content   {

  padding:30px;
}

to improve the plunkr. I see two (2) issues:

  1. No discrete step indicators
  2. Thumb position is wrong... (I think this has to due with content $scope disconnects, btw).

@PaulMougel
Copy link
Contributor

Confirming the fix, thanks!

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

No branches or pull requests

5 participants