fix(range): show bubble when changing value

Author: wuda-io

docs/js/materialize.js

@@ -24,6 +24,7 @@ import { Timepicker } from './timepicker';
 import { Toast } from './toasts';
 import { Tooltip } from './tooltip';
 import { Waves } from './waves';
+import { Range } from './range';
 
 export class M {
   static version = '1.2.2';
@@ -117,6 +118,7 @@ export class M {
     Forms.Init();
     Chips.Init();
     Waves.Init();
+    Range.Init();
   }
 
   //--- TODO: Remove!
@@ -153,7 +155,6 @@ export class M {
   }
   //---
 
-
   static AutoInit(context:Element = null) {
     let root = !!context ? context : document.body;
     let registry = {
@@ -174,7 +175,7 @@ export class M {
       TapTarget: root.querySelectorAll('.tap-target:not(.no-autoinit)'),
       Timepicker: root.querySelectorAll('.timepicker:not(.no-autoinit)'),
       Tooltip: root.querySelectorAll('.tooltipped:not(.no-autoinit)'),
-      FloatingActionButton: root.querySelectorAll('.fixed-action-btn:not(.no-autoinit)')
+      FloatingActionButton: root.querySelectorAll('.fixed-action-btn:not(.no-autoinit)'),
     };
     M.Autocomplete.init(registry.Autocomplete, null);
     M.Carousel.init(registry.Carousel, null);  
@@ -193,7 +194,7 @@ export class M {
     M.TapTarget.init(registry.TapTarget, null);
     M.Timepicker.init(registry.Timepicker, null);
     M.Tooltip.init(registry.Tooltip, null);
-    M.FloatingActionButton.init(registry.FloatingActionButton, null);         
+    M.FloatingActionButton.init(registry.FloatingActionButton, null);
   }
 
   static objectSelectorString(obj: any): string {

src/global.ts

@@ -170,9 +170,13 @@ const _defaults = {};
     _calcRangeOffset(): number {
       const width = this.el.getBoundingClientRect().width - 15;
       const max = parseFloat(this.el.getAttribute('max')) || 100; // Range default max
-      const min = parseFloat(this.el.getAttribute('min')) || 0; // Range default min
-      const percent = (parseFloat(this.el.getAttribute('value')) - min) / (max - min);
+      const min = parseFloat(this.el.getAttribute('min')) || 0; // Range default min      
+      const percent = (parseFloat(this.el.value) - min) / (max - min);
       return percent * width;
     }
+
+    static Init(){
+      Range.init(document.querySelectorAll('input[type=range]'), {});
+    }
   }