diff --git a/packages/core/src/components/range/test/basic/index.html b/packages/core/src/components/range/test/basic/index.html
index 3e000544ba..e9dc5f53e4 100644
--- a/packages/core/src/components/range/test/basic/index.html
+++ b/packages/core/src/components/range/test/basic/index.html
@@ -33,16 +33,34 @@
           </ion-item>
           <ion-item>
             <ion-range pin="true" color="secondary" value="86">
-              <ion-icon small name="ios-sunny-outline" slot="start"></ion-icon>
+              <ion-icon small name="ios-sunny" slot="start"></ion-icon>
               <ion-icon name="ios-sunny" slot="end"></ion-icon>
             </ion-range>
             <ion-range pin="true" color="danger" value="54">
-              <ion-icon small name="ios-thermometer-outline" slot="start"></ion-icon>
+              <ion-icon small name="ios-thermometer" slot="start"></ion-icon>
               <ion-icon name="ios-thermometer" slot="end"></ion-icon>
             </ion-range>
           </ion-item>
         </ion-list>
 
+        <ion-list>
+          <ion-list-header>
+            Dynamic Value
+          </ion-list-header>
+          <ion-item>
+            <ion-range color="secondary" id="progressValue"></ion-range>
+            <div id="progressValueResult" slot="end"></div>
+          </ion-item>
+          <ion-item>
+            <ion-range color="danger" id="brightnessValue"></ion-range>
+            <div id="brightnessValueResult" slot="end"></div>
+          </ion-item>
+          <ion-item>
+            <ion-range color="dark" id="contrastValue"></ion-range>
+            <div id="contrastValueResult" slot="end"></div>
+          </ion-item>
+        </ion-list>
+
         <ion-list>
           <ion-list-header>
             Mode
@@ -82,6 +100,23 @@
   </ion-app>
 
   <script>
+    var ranges = ['progressValue', 'brightnessValue', 'contrastValue'];
+
+    for (var i = 0; i < ranges.length; i++) {
+      var el = document.getElementById(ranges[i]);
+      el.value = (i + 1) * 26;
+      updateRangeResult(el);
+
+      el.addEventListener('ionChange', function(ev) {
+        updateRangeResult(ev.currentTarget);
+      });
+    }
+
+    function updateRangeResult(el) {
+      var resultEl = document.getElementById(`${el.id}Result`);
+      resultEl.innerHTML = el.value;
+    }
+
     var knob = document.getElementById('multiKnob')
     var debounceRange = document.getElementById('debounce')
     knob.value = {