bug: Range item color class doesn't immediately update

[jack-guy]

Type: bug

Platform: all

I have a set-up in which a toggle item is used to determine whether or not a range slider is disabled. To indicate that the range slider is disabled, I change its class between range-positive and range-stable, like so:

    <ion-toggle ng-model='state'>On/off</ion-toggle>
    <div class="item range" ng-class="{'range-positive': state, 'range-stable': !state}">
        {{ state}}
        <input ng-disabled='!state' type="range" min="0" max="100" value="33">
    </div>

While the disabled attribute correctly updates with every toggle click, the range class updates but does not display as updated until the next click (at which point it is incorrect).

[perrygovier]

Hey @J4G-, can you put this in a codepen so we can have something to quickly test against?

[jack-guy]

Here you go! http://codepen.io/anon/pen/GgVoEx

[mhartington]

Hmm, unless I'm missing something, it seems to work fine for me using the nightly builds.

http://codepen.io/mhartington/pen/XJvxdp

@J4G- can you confirm this for me?

[jack-guy]

On Chrome (Windows 8.1 64 bit) they are still reversed for me, but on Chrome for Android they aren't... What's going on here? I'm assuming this isn't Ionic's fault.

[mhartington]

Hmm, thats interesting. What version of chrome is it? I just tested this on an android 4.4 and it seems to work fine. Are you having this issue on a device as well?

[jack-guy]

Version 42.0.2311.90 m on my Desktop is broken, while version 42 on my Android 5 Nexus tablet works. I have no clue where the discrepancy would be. It also works on Safari for Windows, so I guess my browser is just a really weird edge case.

Sorry for the false alarm!

[mhartington]

All good :+1: