Project import generated by Copybara.
GitOrigin-RevId: 63746295f1a5ab5a619056791995793d65529e62
diff --git a/node_modules/material-design-lite/src/slider/README.md b/node_modules/material-design-lite/src/slider/README.md
new file mode 100755
index 0000000..383c816
--- /dev/null
+++ b/node_modules/material-design-lite/src/slider/README.md
@@ -0,0 +1,60 @@
+## Introduction
+
+The Material Design Lite (MDL) **slider** component is an enhanced version of the new HTML5 `<input type="range">` element. A slider consists of a horizontal line upon which sits a small, movable disc (the *thumb*) and, typically, text that clearly communicates a value that will be set when the user moves it.
+
+Sliders are a fairly new feature in user interfaces, and allow users to choose a value from a predetermined range by moving the thumb through the range (lower values to the left, higher values to the right). Their design and use is an important factor in the overall user experience. See the slider component's [Material Design specifications page](http://www.google.com/design/spec/components/sliders.html) for details.
+
+The enhanced slider component may be initially or programmatically *disabled*.
+
+### To include an MDL **slider** component:
+
+ 1. Code a `<p>` paragraph element and style it as desired. Include a CSS `width` property (directly or via a CSS class), which determines the slider's size.
+```html
+<p style="width:300px">
+...
+</p>
+```
+ 2. Inside the paragraph container, code an `<input>` element and give it a `type` attribute whose value is `"range"`. Also give it an `id` attribute to make it available for scripting, and `min` and `max` attributes whose values specify the slider's range. Give it a `value` attribute whose value sets the initial thumb position (optional; if omitted, defaults to 50% of the maximum), and a `step` attribute whose value specifies the increment by which the thumb moves (also optional; if omitted, defaults to 1). Finally, give it an event handler to be executed when the user changes the slider's value.
+```html
+<p style="width:300px">
+ <input type="range" id="s1" min="0" max="10" value="4" step="2">
+</p>
+```
+ 3. Add one or more MDL classes, separated by spaces, to the slider using the `class` attribute.
+```html
+<p style="width:300px">
+ <input class="mdl-slider mdl-js-slider" type="range" id="s1" min="0" max="10" value="4" step="2">
+</p>
+```
+
+The slider component is ready for use.
+
+#### Example
+
+A slider that controls volume.
+```html
+<p style="width:300px">
+<input class="mdl-slider mdl-js-slider" type="range" id="s1" min="0" max="10" value="4" step="2">
+</p>
+```
+
+## Configuration options
+
+The MDL CSS classes apply various predefined visual and behavioral enhancements to the slider. The table below lists the available classes and their effects.
+
+| MDL class | Effect | Remarks |
+|-----------|--------|---------|
+| `mdl-slider` | Defines input element as an MDL component | Required |
+| `mdl-js-slider` | Assigns basic MDL behavior to input element | Required |
+
+>**Note:** A disabled version of the slider is provided, and is invoked with the standard HTML boolean attribute `disabled`. `<input class="mdl-slider mdl-js-slider" type="range" id="s1" min="0" max="10" value="4" step="2" disabled>`
+>This attribute may be added or removed programmatically via scripting.
+
+>**Note:** Although the *value* attribute is used to set a slider's initial value, it should not be used
+to modify the value programmatically; instead, use the MDL `change()` method. For example, assuming
+that *slider1* is a slider object and *newvalue* is a variable containing the desired value, do not
+use `slider1.value = newvalue`; instead, use `slider1.MaterialSlider.change(newvalue)`.
+
+## License
+
+Copyright Google, 2015. Licensed under an Apache-2 license.
diff --git a/node_modules/material-design-lite/src/slider/_slider.scss b/node_modules/material-design-lite/src/slider/_slider.scss
new file mode 100644
index 0000000..3255901
--- /dev/null
+++ b/node_modules/material-design-lite/src/slider/_slider.scss
@@ -0,0 +1,397 @@
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+@import "../variables";
+
+// Some CSS magic to target only IE.
+_:-ms-input-placeholder, :root .mdl-slider.mdl-slider.is-upgraded {
+ -ms-appearance: none;
+ // The thumb can't overflow the track or the rest of the control in IE, so we
+ // need to make it tall enough to contain the largest version of the thumb.
+ height: 32px;
+ margin: 0;
+}
+
+// Slider component (styled input[type=range]).
+.mdl-slider {
+ width: calc(100% - 40px);
+ margin: 0 20px;
+
+ &.is-upgraded {
+ -webkit-appearance: none;
+ -moz-appearance: none;
+ appearance: none;
+ height: 2px;
+ background: transparent;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ user-select: none;
+ outline: 0;
+ padding: 0;
+ color: $range-color;
+ align-self: center;
+ z-index: 1;
+ cursor: pointer;
+
+
+ // Disable default focus on Firefox.
+ &::-moz-focus-outer {
+ border: 0;
+ }
+
+ // Disable tooltip on IE.
+ &::-ms-tooltip {
+ display: none;
+ }
+
+
+ /**************************** Tracks ****************************/
+ &::-webkit-slider-runnable-track {
+ background: transparent;
+ }
+
+ &::-moz-range-track {
+ background: transparent;
+ border: none;
+ }
+
+ &::-ms-track {
+ background: none;
+ color: transparent;
+ height: 2px;
+ width: 100%;
+ border: none;
+ }
+
+ &::-ms-fill-lower {
+ padding: 0;
+ // Margin on -ms-track doesn't work right, so we use gradients on the
+ // fills.
+ background: linear-gradient(to right,
+ transparent,
+ transparent 16px,
+ $range-color 16px,
+ $range-color 0);
+ }
+
+ &::-ms-fill-upper {
+ padding: 0;
+ // Margin on -ms-track doesn't work right, so we use gradients on the
+ // fills.
+ background: linear-gradient(to left,
+ transparent,
+ transparent 16px,
+ $range-bg-color 16px,
+ $range-bg-color 0);
+ }
+
+
+ /**************************** Thumbs ****************************/
+ &::-webkit-slider-thumb {
+ -webkit-appearance: none;
+ width: 12px;
+ height: 12px;
+ box-sizing: border-box;
+ border-radius: 50%;
+ background: $range-color;
+ border: none;
+ transition: transform 0.18s $animation-curve-default,
+ border 0.18s $animation-curve-default,
+ box-shadow 0.18s $animation-curve-default,
+ background 0.28s $animation-curve-default;
+ }
+
+ &::-moz-range-thumb {
+ -moz-appearance: none;
+ width: 12px;
+ height: 12px;
+ box-sizing: border-box;
+ border-radius: 50%;
+ background-image: none;
+ background: $range-color;
+ border: none;
+ // -moz-range-thumb doesn't currently support transitions.
+ }
+
+ &:focus:not(:active)::-webkit-slider-thumb {
+ box-shadow: 0 0 0 10px $range-faded-color;
+ }
+
+ &:focus:not(:active)::-moz-range-thumb {
+ box-shadow: 0 0 0 10px $range-faded-color;
+ }
+
+ &:active::-webkit-slider-thumb {
+ background-image: none;
+ background: $range-color;
+ transform: scale(1.5);
+ }
+
+ &:active::-moz-range-thumb {
+ background-image: none;
+ background: $range-color;
+ transform: scale(1.5);
+ }
+
+ &::-ms-thumb {
+ width: 32px;
+ height: 32px;
+ border: none;
+ border-radius: 50%;
+ background: $range-color;
+ transform: scale(0.375);
+ // -ms-thumb doesn't currently support transitions, but leaving this here
+ // in case support ever gets added.
+ transition: transform 0.18s $animation-curve-default,
+ background 0.28s $animation-curve-default;
+ }
+
+ &:focus:not(:active)::-ms-thumb {
+ background: radial-gradient(circle closest-side,
+ $range-color 0%,
+ $range-color 37.5%,
+ $range-faded-color 37.5%,
+ $range-faded-color 100%);
+ transform: scale(1);
+ }
+
+ &:active::-ms-thumb {
+ background: $range-color;
+ transform: scale(0.5625);
+ }
+
+
+ /**************************** 0-value ****************************/
+ &.is-lowest-value::-webkit-slider-thumb {
+ border: 2px solid $range-bg-color;
+ background: transparent;
+ }
+
+ &.is-lowest-value::-moz-range-thumb {
+ border: 2px solid $range-bg-color;
+ background: transparent;
+ }
+
+ &.is-lowest-value +
+ .mdl-slider__background-flex > .mdl-slider__background-upper {
+ left: 6px;
+ }
+
+ &.is-lowest-value:focus:not(:active)::-webkit-slider-thumb {
+ box-shadow: 0 0 0 10px $range-bg-focus-color;
+ background: $range-bg-focus-color;
+ }
+
+ &.is-lowest-value:focus:not(:active)::-moz-range-thumb {
+ box-shadow: 0 0 0 10px $range-bg-focus-color;
+ background: $range-bg-focus-color;
+ }
+
+ &.is-lowest-value:active::-webkit-slider-thumb {
+ border: 1.6px solid $range-bg-color;
+ transform: scale(1.5);
+ }
+
+ &.is-lowest-value:active +
+ .mdl-slider__background-flex > .mdl-slider__background-upper {
+ left: 9px;
+ }
+
+ &.is-lowest-value:active::-moz-range-thumb {
+ border: 1.5px solid $range-bg-color;
+ transform: scale(1.5);
+ }
+
+ &.is-lowest-value::-ms-thumb {
+ background: radial-gradient(circle closest-side,
+ transparent 0%,
+ transparent 66.67%,
+ $range-bg-color 66.67%,
+ $range-bg-color 100%);
+ }
+
+ &.is-lowest-value:focus:not(:active)::-ms-thumb {
+ background: radial-gradient(circle closest-side,
+ $range-bg-focus-color 0%,
+ $range-bg-focus-color 25%,
+ $range-bg-color 25%,
+ $range-bg-color 37.5%,
+ $range-bg-focus-color 37.5%,
+ $range-bg-focus-color 100%);
+ transform: scale(1);
+ }
+
+ &.is-lowest-value:active::-ms-thumb {
+ transform: scale(0.5625);
+ background: radial-gradient(circle closest-side,
+ transparent 0%,
+ transparent 77.78%,
+ $range-bg-color 77.78%,
+ $range-bg-color 100%);
+ }
+
+ &.is-lowest-value::-ms-fill-lower {
+ background: transparent;
+ }
+
+ &.is-lowest-value::-ms-fill-upper {
+ margin-left: 6px;
+ }
+
+ &.is-lowest-value:active::-ms-fill-upper {
+ margin-left: 9px;
+ }
+
+ /**************************** Disabled ****************************/
+
+ &:disabled:focus::-webkit-slider-thumb,
+ &:disabled:active::-webkit-slider-thumb,
+ &:disabled::-webkit-slider-thumb {
+ transform: scale(0.667);
+ background: $range-bg-color;
+ }
+
+ &:disabled:focus::-moz-range-thumb,
+ &:disabled:active::-moz-range-thumb,
+ &:disabled::-moz-range-thumb {
+ transform: scale(0.667);
+ background: $range-bg-color;
+ }
+
+ &:disabled +
+ .mdl-slider__background-flex > .mdl-slider__background-lower {
+ background-color: $range-bg-color;
+ left: -6px;
+ }
+
+ &:disabled +
+ .mdl-slider__background-flex > .mdl-slider__background-upper {
+ left: 6px;
+ }
+
+ &.is-lowest-value:disabled:focus::-webkit-slider-thumb,
+ &.is-lowest-value:disabled:active::-webkit-slider-thumb,
+ &.is-lowest-value:disabled::-webkit-slider-thumb {
+ border: 3px solid $range-bg-color;
+ background: transparent;
+ transform: scale(0.667);
+ }
+
+ &.is-lowest-value:disabled:focus::-moz-range-thumb,
+ &.is-lowest-value:disabled:active::-moz-range-thumb,
+ &.is-lowest-value:disabled::-moz-range-thumb {
+ border: 3px solid $range-bg-color;
+ background: transparent;
+ transform: scale(0.667);
+ }
+
+ &.is-lowest-value:disabled:active +
+ .mdl-slider__background-flex > .mdl-slider__background-upper {
+ left: 6px;
+ }
+
+ &:disabled:focus::-ms-thumb,
+ &:disabled:active::-ms-thumb,
+ &:disabled::-ms-thumb {
+ transform: scale(0.25);
+ background: $range-bg-color;
+ }
+
+ &.is-lowest-value:disabled:focus::-ms-thumb,
+ &.is-lowest-value:disabled:active::-ms-thumb,
+ &.is-lowest-value:disabled::-ms-thumb {
+ transform: scale(0.25);
+ background: radial-gradient(circle closest-side,
+ transparent 0%,
+ transparent 50%,
+ $range-bg-color 50%,
+ $range-bg-color 100%);
+ }
+
+ &:disabled::-ms-fill-lower {
+ margin-right: 6px;
+ background: linear-gradient(to right,
+ transparent,
+ transparent 25px,
+ $range-bg-color 25px,
+ $range-bg-color 0);
+ }
+
+ &:disabled::-ms-fill-upper {
+ margin-left: 6px;
+ }
+
+ &.is-lowest-value:disabled:active::-ms-fill-upper {
+ margin-left: 6px;
+ }
+ }
+}
+
+ // Since we need to specify a height of 32px in IE, we add a class here for a
+ // container that brings it back to a reasonable height.
+ .mdl-slider__ie-container {
+ height: 18px;
+ overflow: visible;
+ border: none;
+ margin: none;
+ padding: none;
+ }
+
+ // We use a set of divs behind the track to style it in all non-IE browsers.
+ // This one contains both the background and the slider.
+ .mdl-slider__container {
+ height: 18px;
+ position: relative;
+ background: none;
+ display: flex;
+ flex-direction: row;
+ }
+
+ // This one sets up a flex box for the styled upper and lower portions of the
+ // the slider track.
+ .mdl-slider__background-flex {
+ background: transparent;
+ position: absolute;
+ height: 2px;
+ width: calc(100% - 52px);
+ top: 50%;
+ left: 0;
+ margin: 0 26px;
+ display: flex;
+ overflow: hidden;
+ border: 0;
+ padding: 0;
+ transform: translate(0, -1px);
+ }
+
+ // This one styles the lower part of the slider track.
+ .mdl-slider__background-lower {
+ background: $range-color;
+ flex: 0;
+ position: relative;
+ border: 0;
+ padding: 0;
+ }
+
+ // This one styles the upper part of the slider track.
+ .mdl-slider__background-upper {
+ background: $range-bg-color;
+ flex: 0;
+ position: relative;
+ border: 0;
+ padding: 0;
+ transition: left 0.18s $animation-curve-default
+ }
diff --git a/node_modules/material-design-lite/src/slider/slider.js b/node_modules/material-design-lite/src/slider/slider.js
new file mode 100644
index 0000000..b34b8b6
--- /dev/null
+++ b/node_modules/material-design-lite/src/slider/slider.js
@@ -0,0 +1,244 @@
+/**
+ * @license
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+(function() {
+ 'use strict';
+
+ /**
+ * Class constructor for Slider MDL component.
+ * Implements MDL component design pattern defined at:
+ * https://github.com/jasonmayes/mdl-component-design-pattern
+ *
+ * @constructor
+ * @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
+ * @suppress {missingProperties}
+ */
+ 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;
+ }
+
+ // 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.
+ *
+ * @private
+ */
+ MaterialSlider.prototype.updateValueStyles_ = function() {
+ // 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() {
+ this.element_.disabled = true;
+ };
+ MaterialSlider.prototype['disable'] = MaterialSlider.prototype.disable;
+
+ /**
+ * Enable slider.
+ *
+ * @public
+ */
+ MaterialSlider.prototype.enable = function() {
+
+ this.element_.disabled = false;
+ };
+ MaterialSlider.prototype['enable'] = MaterialSlider.prototype.enable;
+
+ /**
+ * 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_();
+ };
+ MaterialSlider.prototype['change'] = MaterialSlider.prototype.change;
+
+ /**
+ * 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);
+ }
+ };
+
+ // 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
+ });
+})();
diff --git a/node_modules/material-design-lite/src/slider/snippets/demo.html b/node_modules/material-design-lite/src/slider/snippets/demo.html
new file mode 100644
index 0000000..c7975d7
--- /dev/null
+++ b/node_modules/material-design-lite/src/slider/snippets/demo.html
@@ -0,0 +1,10 @@
+ <div class="demo-preview-block">
+ <p>
+ <input class="mdl-slider mdl-js-slider" type="range"
+ min="0" max="100" value="0" tabindex="0">
+ </p>
+ <p>
+ <input class="mdl-slider mdl-js-slider" type="range"
+ min="0" max="100" value="10" tabindex="0">
+ </p>
+ </div>
diff --git a/node_modules/material-design-lite/src/slider/snippets/slider-default-demo.html b/node_modules/material-design-lite/src/slider/snippets/slider-default-demo.html
new file mode 100644
index 0000000..53cce0e
--- /dev/null
+++ b/node_modules/material-design-lite/src/slider/snippets/slider-default-demo.html
@@ -0,0 +1,7 @@
+<style>
+ .demo-slider__slider-default .mdl-slider {
+ width: 30vw;
+ max-width: 260px;
+ }
+</style>
+{% include "slider-default.html" %}
diff --git a/node_modules/material-design-lite/src/slider/snippets/slider-default.html b/node_modules/material-design-lite/src/slider/snippets/slider-default.html
new file mode 100644
index 0000000..c0fd976
--- /dev/null
+++ b/node_modules/material-design-lite/src/slider/snippets/slider-default.html
@@ -0,0 +1,3 @@
+<!-- Default Slider -->
+<input class="mdl-slider mdl-js-slider" type="range"
+ min="0" max="100" value="0" tabindex="0">
diff --git a/node_modules/material-design-lite/src/slider/snippets/slider-starting-value-demo.html b/node_modules/material-design-lite/src/slider/snippets/slider-starting-value-demo.html
new file mode 100644
index 0000000..f3378c5
--- /dev/null
+++ b/node_modules/material-design-lite/src/slider/snippets/slider-starting-value-demo.html
@@ -0,0 +1,8 @@
+<style>
+ .demo-slider__slider-starting-value .mdl-slider {
+ width: 30vw;
+ max-width: 260px;
+ }
+</style>
+
+{% include "slider-starting-value.html" %}
diff --git a/node_modules/material-design-lite/src/slider/snippets/slider-starting-value.html b/node_modules/material-design-lite/src/slider/snippets/slider-starting-value.html
new file mode 100644
index 0000000..80f97b9
--- /dev/null
+++ b/node_modules/material-design-lite/src/slider/snippets/slider-starting-value.html
@@ -0,0 +1,3 @@
+<!-- Slider with Starting Value -->
+<input class="mdl-slider mdl-js-slider" type="range"
+ min="0" max="100" value="25" tabindex="0">