From 3151aec8de810fce4a4737d4eff191ad4a633f5b Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandy@ionic.io>
Date: Wed, 31 Jan 2018 13:08:24 -0500
Subject: [PATCH] fix(range): update range UI when value changes

---
 packages/core/src/components/range/range.tsx   |  1 +
 .../src/components/range/test/basic/index.html | 18 +++++++++++++++++-
 2 files changed, 18 insertions(+), 1 deletion(-)

diff --git a/packages/core/src/components/range/range.tsx b/packages/core/src/components/range/range.tsx
index 0f2bceddcf..07aeefa5fe 100644
--- a/packages/core/src/components/range/range.tsx
+++ b/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();
   }
 
diff --git a/packages/core/src/components/range/test/basic/index.html b/packages/core/src/components/range/test/basic/index.html
index e9dc5f53e4..1400a978c6 100644
--- a/packages/core/src/components/range/test/basic/index.html
+++ b/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 = {