feat(slider): Add color theme mixins; default to secondary; remove --off

demos/slider.html

@@ -35,7 +35,6 @@
 
       .mdc-theme--dark {
         background-color: #333;
-        --mdc-theme-primary: #64dd17;
       }
 
       .custom-bg {
@@ -69,7 +68,7 @@
       <section class="hero">
         <div id="hero-slider-wrapper">
           <div id="hero-slider" class="mdc-slider" tabindex="0"
-               role="slider" aria-valuemin="0" aria-valuemax="100" aria-valuenow="30"
+               role="slider" aria-valuemin="0" aria-valuemax="50" aria-valuenow="20"
                aria-label="Select Value">
             <div class="mdc-slider__track-container">
               <div class="mdc-slider__track"></div>
@@ -84,17 +83,14 @@
         </div>
       </section>
 
-      <section class="example"><em>Note that in browsers that support custom properties, we alter theme's primary
-             color when using the dark theme toggle so that the slider appears more visible</em></section>
-
       <section id="slider-example" class="example">
         <h2>Continuous Slider</h2>
         <div class="slider-example">
           <p id="example-cs-label">Select Value:</p>
 
           <div class="example-slider-wrapper">
             <div id="continuous-mdc-slider" class="mdc-slider" tabindex="0" role="slider"
-                 aria-valuemin="0" aria-valuemax="100" aria-valuenow="30"
+                 aria-valuemin="0" aria-valuemax="50" aria-valuenow="20"
                  aria-labelledby="example-cs-label">
               <div class="mdc-slider__track-container">
                 <div class="mdc-slider__track"></div>
@@ -123,14 +119,14 @@ <h2>Discrete Slider</h2>
 
           <div class="example-slider-wrapper">
             <div id="discrete-mdc-slider" class="mdc-slider mdc-slider--discrete" tabindex="0" role="slider"
-                 aria-valuemin="0" aria-valuemax="100" aria-valuenow="30"
+                 aria-valuemin="0" aria-valuemax="50" aria-valuenow="20"
                  aria-labelledby="example-ds-label">
               <div class="mdc-slider__track-container">
                 <div class="mdc-slider__track"></div>
               </div>
               <div class="mdc-slider__thumb-container">
                 <div class="mdc-slider__pin">
-                  <span class="mdc-slider__pin-value-marker">30</span>
+                  <span class="mdc-slider__pin-value-marker">20</span>
                 </div>
                 <svg class="mdc-slider__thumb" width="21" height="21">
                   <circle cx="10.5" cy="10.5" r="7.875"></circle>
@@ -148,13 +144,13 @@ <h2>Discrete Slider</h2>
           </p>
         </div>
 
-        <h2>Discrete Slider with markers</h2>
+        <h2>Discrete Slider with Tick Marks</h2>
         <div class="slider-example">
           <p id="example-ds-marker-label">Select Value:</p>
 
           <div class="example-slider-wrapper">
             <div id="discrete-mdc-slider-w-marker" class="mdc-slider mdc-slider--discrete mdc-slider--display-markers" tabindex="0" role="slider"
-                 aria-valuemin="0" aria-valuemax="100" aria-valuenow="30"
+                 aria-valuemin="0" aria-valuemax="50" aria-valuenow="20"
                  aria-labelledby="example-ds-marker-label">
               <div class="mdc-slider__track-container">
                 <div class="mdc-slider__track"></div>
@@ -163,7 +159,7 @@ <h2>Discrete Slider with markers</h2>
               </div>
               <div class="mdc-slider__thumb-container">
                 <div class="mdc-slider__pin">
-                  <span class="mdc-slider__pin-value-marker">30</span>
+                  <span class="mdc-slider__pin-value-marker">20</span>
                 </div>
                 <svg class="mdc-slider__thumb" width="21" height="21">
                   <circle cx="10.5" cy="10.5" r="7.875"></circle>
@@ -181,19 +177,52 @@ <h2>Discrete Slider with markers</h2>
           </p>
         </div>
 
+        <h2>Custom Colored Discrete Slider with Tick Marks</h2>
+        <div class="slider-example">
+          <p id="example-custom-ds-marker-label">Select Value:</p>
+
+          <div class="example-slider-wrapper">
+            <div id="custom-discrete-mdc-slider-w-marker" class="mdc-slider mdc-slider--discrete mdc-slider--display-markers demo-slider--custom" tabindex="0" role="slider"
+                 aria-valuemin="0" aria-valuemax="50" aria-valuenow="20"
+                 aria-labelledby="example-custom-ds-marker-label">
+              <div class="mdc-slider__track-container">
+                <div class="mdc-slider__track"></div>
+                <div class="mdc-slider__track-marker-container">
+                </div>
+              </div>
+              <div class="mdc-slider__thumb-container">
+                <div class="mdc-slider__pin">
+                  <span class="mdc-slider__pin-value-marker">20</span>
+                </div>
+                <svg class="mdc-slider__thumb" width="21" height="21">
+                  <circle cx="10.5" cy="10.5" r="7.875"></circle>
+                </svg>
+                <div class="mdc-slider__focus-ring"></div>
+              </div>
+            </div>
+          </div>
+
+          <p>
+            Value from <code>MDCSlider:input</code> event: <span id="custom-discrete-slider-w-marker-value">0</span>
+          </p>
+          <p>
+            Value from <code>MDCSlider:change</code> event: <span id="custom-discrete-slider-w-marker-committed-value">0</span>
+          </p>
+        </div>
+
         <div>
           <label>
-            Min: <input name="min" type="number" min="0" max="100" value="0">
+            Min: <input name="min" type="number" min="0" max="50" value="0">
           </label>
         </div>
         <div>
           <label>
-            Max: <input name="max" type="number" min="0" max="100" value="100">
+            Max: <input name="max" type="number" min="0" max="50" value="50">
           </label>
         </div>
         <div>
           <label>
-            Step: <input name="step" type="number" min="0" max="100" value="0">
+            Step: <input name="step" type="number" min="0" max="50" value="0">
           </label>
         </div>
         <div>
@@ -221,10 +250,15 @@ <h2>Discrete Slider with markers</h2>
     <script src="/assets/material-components-web.js"></script>
     <script>
       (function() {
-        setTimeout(function() {
-          mdc.slider.MDCSlider.attachTo(document.getElementById('hero-slider'));
-          initDemo(document.getElementById('slider-example'));
-        }, 80);
+        // Wait for Webpack to load CSS. Otherwise, size/position calculations will be incorrect.
+        var interval = setInterval(function() {
+          const element = document.getElementById('hero-slider');
+          if (getComputedStyle(element).position === 'relative') {
+            clearInterval(interval);
+            mdc.slider.MDCSlider.attachTo(element);
+            initDemo(document.getElementById('slider-example'));
+          }
+        }, 100);
 
         function initDemo(demoRoot) {
           var min = demoRoot.querySelector('[name="min"]');
@@ -268,22 +302,36 @@ <h2>Discrete Slider with markers</h2>
             discreteWMarkerCommittedValue.textContent = discreteWMarkerSlider.value;
           });
 
+          var customDiscreteWMarkerValue = demoRoot.querySelector('#custom-discrete-slider-w-marker-value');
+          var customDiscreteWMarkerCommittedValue = demoRoot.querySelector('#custom-discrete-slider-w-marker-committed-value');
+          var customDiscreteWMarkerSliderEl = demoRoot.querySelector('#custom-discrete-mdc-slider-w-marker');
+          var customDiscreteWMarkerSlider = new mdc.slider.MDCSlider(customDiscreteWMarkerSliderEl);
+          customDiscreteWMarkerSlider.listen('MDCSlider:input', function() {
+            customDiscreteWMarkerValue.textContent = customDiscreteWMarkerSlider.value;
+          });
+          customDiscreteWMarkerSlider.listen('MDCSlider:change', function() {
+            customDiscreteWMarkerCommittedValue.textContent = customDiscreteWMarkerSlider.value;
+          });
+
           min.addEventListener('input', function() {
             continuousSlider.min = parseFloat(min.value);
             discreteSlider.min = parseFloat(min.value);
             discreteWMarkerSlider.min = parseFloat(min.value);
+            customDiscreteWMarkerSlider.min = parseFloat(min.value);
           });
 
           max.addEventListener('input', function() {
             continuousSlider.max = parseFloat(max.value);
             discreteSlider.max = parseFloat(max.value);
             discreteWMarkerSlider.max = parseFloat(max.value);
+            customDiscreteWMarkerSlider.max = parseFloat(max.value);
           });
 
           step.addEventListener('input', function() {
             continuousSlider.step = parseFloat(step.value);
             discreteSlider.step = parseFloat(step.value);
             discreteWMarkerSlider.step = parseFloat(step.value);
+            customDiscreteWMarkerSlider.step = parseFloat(step.value);
           });
 
           darkTheme.addEventListener('change', function() {
@@ -296,6 +344,7 @@ <h2>Discrete Slider with markers</h2>
             continuousSlider.disabled = disabled.checked;
             discreteSlider.disabled = disabled.checked;
             discreteWMarkerSlider.disabled = disabled.checked;
+            customDiscreteWMarkerSlider.disabled = disabled.checked;
           });
 
           useCustomColor.addEventListener('change', function() {
@@ -315,6 +364,7 @@ <h2>Discrete Slider with markers</h2>
             continuousSlider.layout();
             discreteSlider.layout();
             discreteWMarkerSlider.layout();
+            customDiscreteWMarkerSlider.layout();
           });
         }
       })();

demos/slider.scss

@@ -17,3 +17,11 @@
 @import "./common";
 @import "../packages/mdc-slider/mdc-slider";
 @import "../packages/mdc-typography/mdc-typography";
+@import "../packages/mdc-theme/color-palette";
+
+.demo-slider--custom {
+  @include mdc-slider-rail-color($material-color-red-700);
+  @include mdc-slider-thumb-color($material-color-orange-500);
+  @include mdc-slider-focus-halo-color($material-color-yellow-900);
+  @include mdc-slider-value-pin-fill-color-accessible($material-color-orange-700);
+}

packages/mdc-slider/README.md

@@ -24,10 +24,9 @@ Note that **vertical sliders and range (multi-thumb) sliders are not supported,
 from the material design spec**.
 
 Also note that we have taken certain deviations from the UX within the spec, e.g. nuances as to the
-slider's motion across the track, as well as the style of the slider thumb when in the "off" state
-in dark mode. Thus, there may be some treatments which deviate from the mocks. These deviations
-arose out of design feedback from seeing sliders used on the web, and thus have been endorsed by
-the Material Design team.
+slider's motion across the track, as well as the color of the tick marks. Thus, there may be some
+treatments which deviate from the mocks. These deviations arose out of design feedback from seeing
+sliders used on the web, and thus have been endorsed by the Material Design team.
 
 ## Design and API Documentation
 
@@ -170,8 +169,8 @@ track container.
 </div>
 ```
 
-> **NOTE**: When the provided step is indivisble to distance between max and min,
-> we place the secondary to last marker proportionally at where thumb could reach and
+> **NOTE**: When the provided step is indivisible to distance between max and min,
+> we place the second to last marker proportionally at where thumb could reach and
 > place the last marker at max value.
 
 ### Disabled sliders
@@ -276,20 +275,32 @@ use to build a custom MDCSlider component for their framework.
 
 ### Theming
 
-All thematic elements of sliders make use of the **primary theme color**, including when the
+By default, all thematic elements of sliders make use of the **secondary theme color**, including when the
 component is used within a dark mode context.
 
-#### Setting the correct background color for disabled/off slider thumbs
+#### Sass Mixins
 
-One tricky issue with sliders is how the thumb is supposed to look when in the disabled or
-"off" states. In these cases, certain portions of the slider's thumb and track are supposed to
+Mixin | Description
+--- | ---
+`mdc-slider-color-accessible($color)` | Sets the color of all slider elements and automatically sets an accessible ink color with high contrast for the value indicator pin
+`mdc-slider-rail-color($color)` | Sets the color of the rail (aka track)
+`mdc-slider-thumb-color($color)` | Sets the color of the thumb (grab handle)
+`mdc-slider-focus-halo-color($color)` | Sets the color of the focus halo
+`mdc-slider-value-pin-fill-color-accessible($color)` | Sets the fill color of the value indicator pin and automatically sets an accessible ink color with high contrast
+`mdc-slider-value-pin-fill-color($color)` | Sets the fill color of the value indicator pin
+`mdc-slider-value-pin-ink-color($color)` | Sets the ink color of the value indicator pin
+
+#### Setting the correct background color for disabled slider thumbs
+
+One tricky issue with sliders is how the thumb is supposed to look when in the disabled state.
+In this case, certain portions of the slider's thumb and track are supposed to
 become "transparent" and reveal the background color behind it. However, this presents a problem as
 there is no elegant way to derive what the background color behind the slider should be. We could
 theoretically walk up the DOM until we found an ancestor with a set background, but that would break
 the component's encapsulation model.
 
 To solve this, you can supply a css custom property `--mdc-slider-bg-color-behind-component`. When
-used, this will override the default colors used for the disabled/off state slider thumb and use
+used, this will override the default color used for the disabled state slider thumb and use
 the color specified:
 
 ```css
@@ -313,23 +324,6 @@ $mdc-slider-default-assumed-bg-color: #fafafa;
 
 If you're using the `.mdc-theme--dark` classes, you'll want to override `$mdc-slider-dark-theme-assumed-bg-color` instead.
 
-Finally, if you'd prefer not to use Sass, you can use the following CSS snippet which should be
-included _after_ the `@material/slider` styles have been loaded onto the page:
-
-```css
-.mdc-slider--off .mdc-slider__thumb {
-  fill: YOUR_CUSTOM_COLOR;
-}
-
-.mdc-slider--disabled .mdc-slider__thumb {
-  stroke: YOUR_CUSTOM_COLOR !important;
-}
-```
-
-Note that the following snippet assumes you are not using `mdc-theme--dark`. If you are, you may
-need to add `.mdc-theme--dark` as an additional ancestor selector before the `.mdc-slider--*`
-classes.
-
 ### Tips/Tricks
 
 #### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)
@@ -338,9 +332,6 @@ Because `MDCSlider` updates its UI based on the values it reads in when it is in
 potential for an incorrect first render before the script containing the `MDCSlider` initialization
 logic executes. To avoid this, there are a few things you can attempt to do:
 
-If the slider's `aria-valuenow` is set to `"0"`, you can manually add the class `mdc-slider--off`
-to the root `mdc-slider` element.
-
 If you know how wide the slider will be at the time of instantiation, you can add an inline style
 to the `mdc-slider__thumb-container`/`mdc-slider__track` elements which will position it correctly
 by using similar logic to that within our code:

packages/mdc-slider/_keyframes.scss

@@ -0,0 +1,30 @@
+//
+// Copyright 2017 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.
+//
+
+@keyframes mdc-slider-emphasize {
+  0% {
+    animation-timing-function: ease-out;
+  }
+
+  50% {
+    animation-timing-function: ease-in;
+    transform: scale(.85);
+  }
+
+  100% {
+    transform: scale(.571);
+  }
+}