material_design_lite-sass 1.0.2.1 → 1.0.3

data/vendor/assets/javascripts/material/ripple.js

@@ -15,230 +15,239 @@
  * limitations under the License.
  */
 
-/**
- * Class constructor for Ripple MDL component.
- * Implements MDL component design pattern defined at:
- * https://github.com/jasonmayes/mdl-component-design-pattern
- * @param {HTMLElement} element The element that will be upgraded.
- */
-function MaterialRipple(element) {
+(function() {
   'use strict';
 
-  this.element_ = element;
-
-  // Initialize instance.
-  this.init();
-}
-
-/**
- * Store constants in one place so they can be updated easily.
- * @enum {string | number}
- * @private
- */
-MaterialRipple.prototype.Constant_ = {
-  INITIAL_SCALE: 'scale(0.0001, 0.0001)',
-  INITIAL_SIZE: '1px',
-  INITIAL_OPACITY: '0.4',
-  FINAL_OPACITY: '0',
-  FINAL_SCALE: ''
-};
-
-/**
- * Store strings for class names defined by this component that are used in
- * JavaScript. This allows us to simply change it in one place should we
- * decide to modify at a later date.
- * @enum {string}
- * @private
- */
-MaterialRipple.prototype.CssClasses_ = {
-  RIPPLE_CENTER: 'mdl-ripple--center',
-  RIPPLE_EFFECT_IGNORE_EVENTS: 'mdl-js-ripple-effect--ignore-events',
-  RIPPLE: 'mdl-ripple',
-  IS_ANIMATING: 'is-animating',
-  IS_VISIBLE: 'is-visible'
-};
+  /**
+   * Class constructor for Ripple MDL component.
+   * Implements MDL component design pattern defined at:
+   * https://github.com/jasonmayes/mdl-component-design-pattern
+   *
+   * @param {HTMLElement} element The element that will be upgraded.
+   */
+  var MaterialRipple = function MaterialRipple(element) {
+    this.element_ = element;
+
+    // Initialize instance.
+    this.init();
+  };
+  window.MaterialRipple = MaterialRipple;
+
+  /**
+   * Store constants in one place so they can be updated easily.
+   *
+   * @enum {String | Number}
+   * @private
+   */
+  MaterialRipple.prototype.Constant_ = {
+    INITIAL_SCALE: 'scale(0.0001, 0.0001)',
+    INITIAL_SIZE: '1px',
+    INITIAL_OPACITY: '0.4',
+    FINAL_OPACITY: '0',
+    FINAL_SCALE: ''
+  };
+
+  /**
+   * Store strings for class names defined by this component that are used in
+   * JavaScript. This allows us to simply change it in one place should we
+   * decide to modify at a later date.
+   *
+   * @enum {String}
+   * @private
+   */
+  MaterialRipple.prototype.CssClasses_ = {
+    RIPPLE_CENTER: 'mdl-ripple--center',
+    RIPPLE_EFFECT_IGNORE_EVENTS: 'mdl-js-ripple-effect--ignore-events',
+    RIPPLE: 'mdl-ripple',
+    IS_ANIMATING: 'is-animating',
+    IS_VISIBLE: 'is-visible'
+  };
+
+  /**
+   * Handle mouse / finger down on element.
+   *
+   * @param {Event} event The event that fired.
+   * @private
+   */
+  MaterialRipple.prototype.downHandler_ = function(event) {
+    if (!this.rippleElement_.style.width && !this.rippleElement_.style.height) {
+      var rect = this.element_.getBoundingClientRect();
+      this.boundHeight = rect.height;
+      this.boundWidth = rect.width;
+      this.rippleSize_ = Math.sqrt(rect.width * rect.width +
+          rect.height * rect.height) * 2 + 2;
+      this.rippleElement_.style.width = this.rippleSize_ + 'px';
+      this.rippleElement_.style.height = this.rippleSize_ + 'px';
+    }
 
-/**
- * Handle mouse / finger down on element.
- * @param {Event} event The event that fired.
- * @private
- */
-MaterialRipple.prototype.downHandler_ = function(event) {
-  'use strict';
+    this.rippleElement_.classList.add(this.CssClasses_.IS_VISIBLE);
 
-  if (!this.rippleElement_.style.width && !this.rippleElement_.style.height) {
-    var rect = this.element_.getBoundingClientRect();
-    this.boundHeight = rect.height;
-    this.boundWidth = rect.width;
-    this.rippleSize_ = Math.sqrt(rect.width * rect.width +
-        rect.height * rect.height) * 2 + 2;
-    this.rippleElement_.style.width = this.rippleSize_ + 'px';
-    this.rippleElement_.style.height = this.rippleSize_ + 'px';
-  }
-
-  this.rippleElement_.classList.add(this.CssClasses_.IS_VISIBLE);
-
-  if (event.type === 'mousedown' && this.ignoringMouseDown_) {
-    this.ignoringMouseDown_ = false;
-  } else {
-    if (event.type === 'touchstart') {
-      this.ignoringMouseDown_ = true;
-    }
-    var frameCount = this.getFrameCount();
-    if (frameCount > 0) {
-      return;
-    }
-    this.setFrameCount(1);
-    var bound = event.currentTarget.getBoundingClientRect();
-    var x;
-    var y;
-    // Check if we are handling a keyboard click.
-    if (event.clientX === 0 && event.clientY === 0) {
-      x = Math.round(bound.width / 2);
-      y = Math.round(bound.height / 2);
+    if (event.type === 'mousedown' && this.ignoringMouseDown_) {
+      this.ignoringMouseDown_ = false;
     } else {
-      var clientX = event.clientX ? event.clientX : event.touches[0].clientX;
-      var clientY = event.clientY ? event.clientY : event.touches[0].clientY;
-      x = Math.round(clientX - bound.left);
-      y = Math.round(clientY - bound.top);
+      if (event.type === 'touchstart') {
+        this.ignoringMouseDown_ = true;
+      }
+      var frameCount = this.getFrameCount();
+      if (frameCount > 0) {
+        return;
+      }
+      this.setFrameCount(1);
+      var bound = event.currentTarget.getBoundingClientRect();
+      var x;
+      var y;
+      // Check if we are handling a keyboard click.
+      if (event.clientX === 0 && event.clientY === 0) {
+        x = Math.round(bound.width / 2);
+        y = Math.round(bound.height / 2);
+      } else {
+        var clientX = event.clientX ? event.clientX : event.touches[0].clientX;
+        var clientY = event.clientY ? event.clientY : event.touches[0].clientY;
+        x = Math.round(clientX - bound.left);
+        y = Math.round(clientY - bound.top);
+      }
+      this.setRippleXY(x, y);
+      this.setRippleStyles(true);
+      window.requestAnimationFrame(this.animFrameHandler.bind(this));
     }
-    this.setRippleXY(x, y);
-    this.setRippleStyles(true);
-    window.requestAnimationFrame(this.animFrameHandler.bind(this));
-  }
-};
-
-/**
- * Handle mouse / finger up on element.
- * @param {Event} event The event that fired.
- * @private
- */
-MaterialRipple.prototype.upHandler_ = function(event) {
-  'use strict';
-
-  // Don't fire for the artificial "mouseup" generated by a double-click.
-  if (event && event.detail !== 2) {
-    this.rippleElement_.classList.remove(this.CssClasses_.IS_VISIBLE);
-  }
-};
-
-/**
- * Initialize element.
- */
-MaterialRipple.prototype.init = function() {
-  'use strict';
+  };
+
+  /**
+   * Handle mouse / finger up on element.
+   *
+   * @param {Event} event The event that fired.
+   * @private
+   */
+  MaterialRipple.prototype.upHandler_ = function(event) {
+    // Don't fire for the artificial "mouseup" generated by a double-click.
+    if (event && event.detail !== 2) {
+      this.rippleElement_.classList.remove(this.CssClasses_.IS_VISIBLE);
+    }
+    // Allow a repaint to occur before removing this class, so the animation
+    // shows for tap events, which seem to trigger a mouseup too soon after
+    // mousedown.
+    window.setTimeout(function() {
+      this.rippleElement_.classList.remove(this.CssClasses_.IS_VISIBLE);
+    }.bind(this), 0);
+  };
+
+  /**
+   * Initialize element.
+   */
+  MaterialRipple.prototype.init = function() {
+    if (this.element_) {
+      var recentering =
+          this.element_.classList.contains(this.CssClasses_.RIPPLE_CENTER);
+      if (!this.element_.classList.contains(
+          this.CssClasses_.RIPPLE_EFFECT_IGNORE_EVENTS)) {
+        this.rippleElement_ = this.element_.querySelector('.' +
+            this.CssClasses_.RIPPLE);
+        this.frameCount_ = 0;
+        this.rippleSize_ = 0;
+        this.x_ = 0;
+        this.y_ = 0;
+
+        // Touch start produces a compat mouse down event, which would cause a
+        // second ripples. To avoid that, we use this property to ignore the first
+        // mouse down after a touch start.
+        this.ignoringMouseDown_ = false;
+
+        this.boundDownHandler = this.downHandler_.bind(this);
+        this.element_.addEventListener('mousedown',
+          this.boundDownHandler);
+        this.element_.addEventListener('touchstart',
+            this.boundDownHandler);
+
+        this.boundUpHandler = this.upHandler_.bind(this);
+        this.element_.addEventListener('mouseup', this.boundUpHandler);
+        this.element_.addEventListener('mouseleave', this.boundUpHandler);
+        this.element_.addEventListener('touchend', this.boundUpHandler);
+        this.element_.addEventListener('blur', this.boundUpHandler);
+
+        this.getFrameCount = function() {
+          return this.frameCount_;
+        };
+
+        this.setFrameCount = function(fC) {
+          this.frameCount_ = fC;
+        };
+
+        this.getRippleElement = function() {
+          return this.rippleElement_;
+        };
+
+        this.setRippleXY = function(newX, newY) {
+          this.x_ = newX;
+          this.y_ = newY;
+        };
+
+        this.setRippleStyles = function(start) {
+          if (this.rippleElement_ !== null) {
+            var transformString;
+            var scale;
+            var size;
+            var offset = 'translate(' + this.x_ + 'px, ' + this.y_ + 'px)';
+
+            if (start) {
+              scale = this.Constant_.INITIAL_SCALE;
+              size = this.Constant_.INITIAL_SIZE;
+            } else {
+              scale = this.Constant_.FINAL_SCALE;
+              size = this.rippleSize_ + 'px';
+              if (recentering) {
+                offset = 'translate(' + this.boundWidth / 2 + 'px, ' +
+                  this.boundHeight / 2 + 'px)';
+              }
+            }
 
-  if (this.element_) {
-    var recentering =
-        this.element_.classList.contains(this.CssClasses_.RIPPLE_CENTER);
-    if (!this.element_.classList.contains(
-        this.CssClasses_.RIPPLE_EFFECT_IGNORE_EVENTS)) {
-      this.rippleElement_ = this.element_.querySelector('.' +
-          this.CssClasses_.RIPPLE);
-      this.frameCount_ = 0;
-      this.rippleSize_ = 0;
-      this.x_ = 0;
-      this.y_ = 0;
-
-      // Touch start produces a compat mouse down event, which would cause a
-      // second ripples. To avoid that, we use this property to ignore the first
-      // mouse down after a touch start.
-      this.ignoringMouseDown_ = false;
+            transformString = 'translate(-50%, -50%) ' + offset + scale;
 
-      this.boundDownHandler = this.downHandler_.bind(this);
-      this.element_.addEventListener('mousedown',
-        this.boundDownHandler);
-      this.element_.addEventListener('touchstart',
-          this.boundDownHandler);
+            this.rippleElement_.style.webkitTransform = transformString;
+            this.rippleElement_.style.msTransform = transformString;
+            this.rippleElement_.style.transform = transformString;
 
-      this.boundUpHandler = this.upHandler_.bind(this);
-      this.element_.addEventListener('mouseup', this.boundUpHandler);
-      this.element_.addEventListener('mouseleave', this.boundUpHandler);
-      this.element_.addEventListener('touchend', this.boundUpHandler);
-      this.element_.addEventListener('blur', this.boundUpHandler);
-
-      this.getFrameCount = function() {
-        return this.frameCount_;
-      };
-
-      this.setFrameCount = function(fC) {
-        this.frameCount_ = fC;
-      };
-
-      this.getRippleElement = function() {
-        return this.rippleElement_;
-      };
-
-      this.setRippleXY = function(newX, newY) {
-        this.x_ = newX;
-        this.y_ = newY;
-      };
-
-      this.setRippleStyles = function(start) {
-        if (this.rippleElement_ !== null) {
-          var transformString;
-          var scale;
-          var size;
-          var offset = 'translate(' + this.x_ + 'px, ' + this.y_ + 'px)';
-
-          if (start) {
-            scale = this.Constant_.INITIAL_SCALE;
-            size = this.Constant_.INITIAL_SIZE;
-          } else {
-            scale = this.Constant_.FINAL_SCALE;
-            size = this.rippleSize_ + 'px';
-            if (recentering) {
-              offset = 'translate(' + this.boundWidth / 2 + 'px, ' +
-                this.boundHeight / 2 + 'px)';
+            if (start) {
+              this.rippleElement_.classList.remove(this.CssClasses_.IS_ANIMATING);
+            } else {
+              this.rippleElement_.classList.add(this.CssClasses_.IS_ANIMATING);
             }
           }
+        };
 
-          transformString = 'translate(-50%, -50%) ' + offset + scale;
-
-          this.rippleElement_.style.webkitTransform = transformString;
-          this.rippleElement_.style.msTransform = transformString;
-          this.rippleElement_.style.transform = transformString;
-
-          if (start) {
-            this.rippleElement_.classList.remove(this.CssClasses_.IS_ANIMATING);
+        this.animFrameHandler = function() {
+          if (this.frameCount_-- > 0) {
+            window.requestAnimationFrame(this.animFrameHandler.bind(this));
           } else {
-            this.rippleElement_.classList.add(this.CssClasses_.IS_ANIMATING);
+            this.setRippleStyles(false);
           }
-        }
-      };
-
-      this.animFrameHandler = function() {
-        if (this.frameCount_-- > 0) {
-          window.requestAnimationFrame(this.animFrameHandler.bind(this));
-        } else {
-          this.setRippleStyles(false);
-        }
-      };
+        };
+      }
     }
-  }
-};
+  };
+
+  /**
+   * Downgrade the component
+   *
+   * @private
+   */
+  MaterialRipple.prototype.mdlDowngrade_ = function() {
+    this.element_.removeEventListener('mousedown',
+    this.boundDownHandler);
+    this.element_.removeEventListener('touchstart',
+        this.boundDownHandler);
 
-/*
-* Downgrade the component
-*/
-MaterialRipple.prototype.mdlDowngrade_ = function() {
-  'use strict';
-  this.element_.removeEventListener('mousedown',
-  this.boundDownHandler);
-  this.element_.removeEventListener('touchstart',
-      this.boundDownHandler);
-
-  this.element_.removeEventListener('mouseup', this.boundUpHandler);
-  this.element_.removeEventListener('mouseleave', this.boundUpHandler);
-  this.element_.removeEventListener('touchend', this.boundUpHandler);
-  this.element_.removeEventListener('blur', this.boundUpHandler);
-};
-
-// The component registers itself. It can assume componentHandler is available
-// in the global scope.
-componentHandler.register({
-  constructor: MaterialRipple,
-  classAsString: 'MaterialRipple',
-  cssClass: 'mdl-js-ripple-effect',
-  widget: false
-});
+    this.element_.removeEventListener('mouseup', this.boundUpHandler);
+    this.element_.removeEventListener('mouseleave', this.boundUpHandler);
+    this.element_.removeEventListener('touchend', this.boundUpHandler);
+    this.element_.removeEventListener('blur', this.boundUpHandler);
+  };
+
+  // The component registers itself. It can assume componentHandler is available
+  // in the global scope.
+  componentHandler.register({
+    constructor: MaterialRipple,
+    classAsString: 'MaterialRipple',
+    cssClass: 'mdl-js-ripple-effect',
+    widget: false
+  });
+})();

data/vendor/assets/javascripts/material/slider.js

@@ -15,238 +15,238 @@
  * limitations under the License.
  */
 
-/**
- * Class constructor for Slider MDL component.
- * Implements MDL component design pattern defined at:
- * https://github.com/jasonmayes/mdl-component-design-pattern
- * @param {HTMLElement} element The element that will be upgraded.
- */
-function MaterialSlider(element) {
+(function() {
   'use strict';
 
-  this.element_ = element;
-  // Browser feature detection.
-  this.isIE_ = window.navigator.msPointerEnabled;
-  // Initialize instance.
-  this.init();
-}
-
-/**
- * Store constants in one place so they can be updated easily.
- * @enum {string | number}
- * @private
- */
-MaterialSlider.prototype.Constant_ = {
-  // None for now.
-};
-
-/**
- * Store strings for class names defined by this component that are used in
- * JavaScript. This allows us to simply change it in one place should we
- * decide to modify at a later date.
- * @enum {string}
- * @private
- */
-MaterialSlider.prototype.CssClasses_ = {
-  IE_CONTAINER: 'mdl-slider__ie-container',
-  SLIDER_CONTAINER: 'mdl-slider__container',
-  BACKGROUND_FLEX: 'mdl-slider__background-flex',
-  BACKGROUND_LOWER: 'mdl-slider__background-lower',
-  BACKGROUND_UPPER: 'mdl-slider__background-upper',
-  IS_LOWEST_VALUE: 'is-lowest-value',
-  IS_UPGRADED: 'is-upgraded'
-};
-
-/**
- * Handle input on element.
- * @param {Event} event The event that fired.
- * @private
- */
-MaterialSlider.prototype.onInput_ = function(event) {
-  'use strict';
-
-  this.updateValueStyles_();
-};
-
-/**
- * Handle change on element.
- * @param {Event} event The event that fired.
- * @private
- */
-MaterialSlider.prototype.onChange_ = function(event) {
-  'use strict';
-
-  this.updateValueStyles_();
-};
-
-/**
- * Handle mouseup on element.
- * @param {Event} event The event that fired.
- * @private
- */
-MaterialSlider.prototype.onMouseUp_ = function(event) {
-  'use strict';
-
-  event.target.blur();
-};
-
-/**
- * Handle mousedown on container element.
- * This handler is purpose is to not require the use to click
- * exactly on the 2px slider element, as FireFox seems to be very
- * strict about this.
- * @param {Event} event The event that fired.
- * @private
- */
-MaterialSlider.prototype.onContainerMouseDown_ = function(event) {
-  'use strict';
-
-  // If this click is not on the parent element (but rather some child)
-  // ignore. It may still bubble up.
-  if (event.target !== this.element_.parentElement) {
-    return;
-  }
-
-  // Discard the original event and create a new event that
-  // is on the slider element.
-  event.preventDefault();
-  var newEvent = new MouseEvent('mousedown', {
-    target: event.target,
-    buttons: event.buttons,
-    clientX: event.clientX,
-    clientY: this.element_.getBoundingClientRect().y
-  });
-  this.element_.dispatchEvent(newEvent);
-};
-
-/**
- * Handle updating of values.
- * @param {Event} event The event that fired.
- * @private
- */
-MaterialSlider.prototype.updateValueStyles_ = function(event) {
-  'use strict';
-
-  // Calculate and apply percentages to div structure behind slider.
-  var fraction = (this.element_.value - this.element_.min) /
-      (this.element_.max - this.element_.min);
-
-  if (fraction === 0) {
-    this.element_.classList.add(this.CssClasses_.IS_LOWEST_VALUE);
-  } else {
-    this.element_.classList.remove(this.CssClasses_.IS_LOWEST_VALUE);
-  }
-
-  if (!this.isIE_) {
-    this.backgroundLower_.style.flex = fraction;
-    this.backgroundLower_.style.webkitFlex = fraction;
-    this.backgroundUpper_.style.flex = 1 - fraction;
-    this.backgroundUpper_.style.webkitFlex = 1 - fraction;
-  }
-};
-
-// Public methods.
-
-/**
- * Disable slider.
- * @public
- */
-MaterialSlider.prototype.disable = function() {
-  'use strict';
-
-  this.element_.disabled = true;
-};
-
-/**
- * Enable slider.
- * @public
- */
-MaterialSlider.prototype.enable = function() {
-  'use strict';
-
-  this.element_.disabled = false;
-};
-
-/**
- * Update slider value.
- * @param {Number} value The value to which to set the control (optional).
- * @public
- */
-MaterialSlider.prototype.change = function(value) {
-  'use strict';
-
-  if (value) {
-    this.element_.value = value;
-  }
-  this.updateValueStyles_();
-};
-
-/**
- * Initialize element.
- */
-MaterialSlider.prototype.init = function() {
-  'use strict';
+  /**
+   * Class constructor for Slider MDL component.
+   * Implements MDL component design pattern defined at:
+   * https://github.com/jasonmayes/mdl-component-design-pattern
+   *
+   * @param {HTMLElement} element The element that will be upgraded.
+   */
+  var MaterialSlider = function MaterialSlider(element) {
+    this.element_ = element;
+    // Browser feature detection.
+    this.isIE_ = window.navigator.msPointerEnabled;
+    // Initialize instance.
+    this.init();
+  };
+  window.MaterialSlider = MaterialSlider;
+
+  /**
+   * Store constants in one place so they can be updated easily.
+   *
+   * @enum {String | Number}
+   * @private
+   */
+  MaterialSlider.prototype.Constant_ = {
+    // None for now.
+  };
+
+  /**
+   * Store strings for class names defined by this component that are used in
+   * JavaScript. This allows us to simply change it in one place should we
+   * decide to modify at a later date.
+   *
+   * @enum {String}
+   * @private
+   */
+  MaterialSlider.prototype.CssClasses_ = {
+    IE_CONTAINER: 'mdl-slider__ie-container',
+    SLIDER_CONTAINER: 'mdl-slider__container',
+    BACKGROUND_FLEX: 'mdl-slider__background-flex',
+    BACKGROUND_LOWER: 'mdl-slider__background-lower',
+    BACKGROUND_UPPER: 'mdl-slider__background-upper',
+    IS_LOWEST_VALUE: 'is-lowest-value',
+    IS_UPGRADED: 'is-upgraded'
+  };
+
+  /**
+   * Handle input on element.
+   *
+   * @param {Event} event The event that fired.
+   * @private
+   */
+  MaterialSlider.prototype.onInput_ = function(event) {
+    this.updateValueStyles_();
+  };
+
+  /**
+   * Handle change on element.
+   *
+   * @param {Event} event The event that fired.
+   * @private
+   */
+  MaterialSlider.prototype.onChange_ = function(event) {
+    this.updateValueStyles_();
+  };
+
+  /**
+   * Handle mouseup on element.
+   *
+   * @param {Event} event The event that fired.
+   * @private
+   */
+  MaterialSlider.prototype.onMouseUp_ = function(event) {
+    event.target.blur();
+  };
+
+  /**
+   * Handle mousedown on container element.
+   * This handler is purpose is to not require the use to click
+   * exactly on the 2px slider element, as FireFox seems to be very
+   * strict about this.
+   *
+   * @param {Event} event The event that fired.
+   * @private
+   */
+  MaterialSlider.prototype.onContainerMouseDown_ = function(event) {
+    // If this click is not on the parent element (but rather some child)
+    // ignore. It may still bubble up.
+    if (event.target !== this.element_.parentElement) {
+      return;
+    }
 
-  if (this.element_) {
-    if (this.isIE_) {
-      // Since we need to specify a very large height in IE due to
-      // implementation limitations, we add a parent here that trims it down to
-      // a reasonable size.
-      var containerIE = document.createElement('div');
-      containerIE.classList.add(this.CssClasses_.IE_CONTAINER);
-      this.element_.parentElement.insertBefore(containerIE, this.element_);
-      this.element_.parentElement.removeChild(this.element_);
-      containerIE.appendChild(this.element_);
+    // Discard the original event and create a new event that
+    // is on the slider element.
+    event.preventDefault();
+    var newEvent = new MouseEvent('mousedown', {
+      target: event.target,
+      buttons: event.buttons,
+      clientX: event.clientX,
+      clientY: this.element_.getBoundingClientRect().y
+    });
+    this.element_.dispatchEvent(newEvent);
+  };
+
+  /**
+   * Handle updating of values.
+   *
+   * @param {Event} event The event that fired.
+   * @private
+   */
+  MaterialSlider.prototype.updateValueStyles_ = function(event) {
+    // Calculate and apply percentages to div structure behind slider.
+    var fraction = (this.element_.value - this.element_.min) /
+        (this.element_.max - this.element_.min);
+
+    if (fraction === 0) {
+      this.element_.classList.add(this.CssClasses_.IS_LOWEST_VALUE);
     } else {
-      // For non-IE browsers, we need a div structure that sits behind the
-      // slider and allows us to style the left and right sides of it with
-      // different colors.
-      var container = document.createElement('div');
-      container.classList.add(this.CssClasses_.SLIDER_CONTAINER);
-      this.element_.parentElement.insertBefore(container, this.element_);
-      this.element_.parentElement.removeChild(this.element_);
-      container.appendChild(this.element_);
-      var backgroundFlex = document.createElement('div');
-      backgroundFlex.classList.add(this.CssClasses_.BACKGROUND_FLEX);
-      container.appendChild(backgroundFlex);
-      this.backgroundLower_ = document.createElement('div');
-      this.backgroundLower_.classList.add(this.CssClasses_.BACKGROUND_LOWER);
-      backgroundFlex.appendChild(this.backgroundLower_);
-      this.backgroundUpper_ = document.createElement('div');
-      this.backgroundUpper_.classList.add(this.CssClasses_.BACKGROUND_UPPER);
-      backgroundFlex.appendChild(this.backgroundUpper_);
+      this.element_.classList.remove(this.CssClasses_.IS_LOWEST_VALUE);
     }
 
-    this.boundInputHandler = this.onInput_.bind(this);
-    this.boundChangeHandler = this.onChange_.bind(this);
-    this.boundMouseUpHandler = this.onMouseUp_.bind(this);
-    this.boundContainerMouseDownHandler = this.onContainerMouseDown_.bind(this);
-    this.element_.addEventListener('input', this.boundInputHandler);
-    this.element_.addEventListener('change', this.boundChangeHandler);
-    this.element_.addEventListener('mouseup', this.boundMouseUpHandler);
-    this.element_.parentElement.addEventListener('mousedown', this.boundContainerMouseDownHandler);
-
+    if (!this.isIE_) {
+      this.backgroundLower_.style.flex = fraction;
+      this.backgroundLower_.style.webkitFlex = fraction;
+      this.backgroundUpper_.style.flex = 1 - fraction;
+      this.backgroundUpper_.style.webkitFlex = 1 - fraction;
+    }
+  };
+
+  // Public methods.
+
+  /**
+   * Disable slider.
+   *
+   * @public
+   */
+  MaterialSlider.prototype.disable = function() {
+    this.element_.disabled = true;
+  };
+
+  /**
+   * Enable slider.
+   *
+   * @public
+   */
+  MaterialSlider.prototype.enable = function() {
+
+    this.element_.disabled = false;
+  };
+
+  /**
+   * Update slider value.
+   *
+   * @param {Number} value The value to which to set the control (optional).
+   * @public
+   */
+  MaterialSlider.prototype.change = function(value) {
+
+    if (typeof value !== 'undefined') {
+      this.element_.value = value;
+    }
     this.updateValueStyles_();
-    this.element_.classList.add(this.CssClasses_.IS_UPGRADED);
-  }
-};
-
-/*
-* Downgrade the component
-*/
-MaterialSlider.prototype.mdlDowngrade_ = function() {
-  'use strict';
-  this.element_.removeEventListener('input', this.boundInputHandler);
-  this.element_.removeEventListener('change', this.boundChangeHandler);
-  this.element_.removeEventListener('mouseup', this.boundMouseUpHandler);
-  this.element_.parentElement.removeEventListener('mousedown', this.boundContainerMouseDownHandler);
-};
-
-// The component registers itself. It can assume componentHandler is available
-// in the global scope.
-componentHandler.register({
-  constructor: MaterialSlider,
-  classAsString: 'MaterialSlider',
-  cssClass: 'mdl-js-slider',
-  widget: true
-});
+  };
+
+  /**
+   * Initialize element.
+   */
+  MaterialSlider.prototype.init = function() {
+
+    if (this.element_) {
+      if (this.isIE_) {
+        // Since we need to specify a very large height in IE due to
+        // implementation limitations, we add a parent here that trims it down to
+        // a reasonable size.
+        var containerIE = document.createElement('div');
+        containerIE.classList.add(this.CssClasses_.IE_CONTAINER);
+        this.element_.parentElement.insertBefore(containerIE, this.element_);
+        this.element_.parentElement.removeChild(this.element_);
+        containerIE.appendChild(this.element_);
+      } else {
+        // For non-IE browsers, we need a div structure that sits behind the
+        // slider and allows us to style the left and right sides of it with
+        // different colors.
+        var container = document.createElement('div');
+        container.classList.add(this.CssClasses_.SLIDER_CONTAINER);
+        this.element_.parentElement.insertBefore(container, this.element_);
+        this.element_.parentElement.removeChild(this.element_);
+        container.appendChild(this.element_);
+        var backgroundFlex = document.createElement('div');
+        backgroundFlex.classList.add(this.CssClasses_.BACKGROUND_FLEX);
+        container.appendChild(backgroundFlex);
+        this.backgroundLower_ = document.createElement('div');
+        this.backgroundLower_.classList.add(this.CssClasses_.BACKGROUND_LOWER);
+        backgroundFlex.appendChild(this.backgroundLower_);
+        this.backgroundUpper_ = document.createElement('div');
+        this.backgroundUpper_.classList.add(this.CssClasses_.BACKGROUND_UPPER);
+        backgroundFlex.appendChild(this.backgroundUpper_);
+      }
+
+      this.boundInputHandler = this.onInput_.bind(this);
+      this.boundChangeHandler = this.onChange_.bind(this);
+      this.boundMouseUpHandler = this.onMouseUp_.bind(this);
+      this.boundContainerMouseDownHandler = this.onContainerMouseDown_.bind(this);
+      this.element_.addEventListener('input', this.boundInputHandler);
+      this.element_.addEventListener('change', this.boundChangeHandler);
+      this.element_.addEventListener('mouseup', this.boundMouseUpHandler);
+      this.element_.parentElement.addEventListener('mousedown', this.boundContainerMouseDownHandler);
+
+      this.updateValueStyles_();
+      this.element_.classList.add(this.CssClasses_.IS_UPGRADED);
+    }
+  };
+
+  /**
+   * Downgrade the component
+   *
+   * @private
+   */
+  MaterialSlider.prototype.mdlDowngrade_ = function() {
+    this.element_.removeEventListener('input', this.boundInputHandler);
+    this.element_.removeEventListener('change', this.boundChangeHandler);
+    this.element_.removeEventListener('mouseup', this.boundMouseUpHandler);
+    this.element_.parentElement.removeEventListener('mousedown', this.boundContainerMouseDownHandler);
+  };
+
+  // The component registers itself. It can assume componentHandler is available
+  // in the global scope.
+  componentHandler.register({
+    constructor: MaterialSlider,
+    classAsString: 'MaterialSlider',
+    cssClass: 'mdl-js-slider',
+    widget: true
+  });
+})();