fix(range): update range UI when value changes

packages/core/src/components/range/range.tsx

@@ -135,6 +135,7 @@ export class Range implements BaseInputComponent {
   @Watch('value')
   protected valueChanged(val: boolean) {
     this.ionChange.emit({value: val});
+    this.inputUpdated();
     this.emitStyle();
   }
 

packages/core/src/components/range/test/basic/index.html

@@ -59,6 +59,9 @@
             <ion-range color="dark" id="contrastValue"></ion-range>
             <div id="contrastValueResult" slot="end"></div>
           </ion-item>
+          <ion-button onclick="increaseRangeValues()">
+            Increase Values
+          </ion-button>
         </ion-list>
 
         <ion-list>
@@ -104,7 +107,7 @@
 
     for (var i = 0; i < ranges.length; i++) {
       var el = document.getElementById(ranges[i]);
-      el.value = (i + 1) * 26;
+      el.value = (i + 1) * 10;
       updateRangeResult(el);
 
       el.addEventListener('ionChange', function(ev) {
@@ -117,6 +120,19 @@
       resultEl.innerHTML = el.value;
     }
 
+    function increaseRangeValues() {
+      for (var i = 0; i < ranges.length; i++) {
+        var el = document.getElementById(ranges[i]);
+        var newValue = el.value + 10;
+
+        if (newValue > 100) {
+          newValue = 10;
+        }
+
+        el.value = newValue;
+      }
+    }
+
     var knob = document.getElementById('multiKnob')
     var debounceRange = document.getElementById('debounce')
     knob.value = {