MD Settings: cr-slider: Make display consistent and clean up.

ui/webui/resources/cr_elements/cr_slider/cr_slider.html

 <link rel="import" href="chrome://resources/html/assert.html">
 <link rel="import" href="chrome://resources/html/polymer.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-slider/paper-slider.html">
 
 <dom-module is="cr-slider">
   <template>
-    <!-- TODO(michaelpg): Remove on-change when paper-slider#136 is fixed. -->
-    <paper-slider id="slider"
-        on-change="onSliderChange_" on-immediate-value-change="onSliderChange_"
-        disabled="[[disabled]]" snaps="[[snaps]]" max-markers="[[maxMarkers]]">
-    </paper-slider>
+    <style>
+      div.outer {
+        align-items: stretch;
+        display: flex;
+        flex-direction: column;
+        margin: 8px 0;
+      }
+
+      div.labels {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        margin: -4px 16px 0 16px;
+      }
+
+      div.labels > div {
+        font-size: 12px;
+      }
+
+      paper-slider {
+        /* Make the slider bar always grey */

[michaelpg, 2016/12/22 07:31:32]

nit: ending period

[stevenjb, 2016/12/22 20:42:18]

Done.

+        --paper-slider-active-color: var(--paper-grey-400);
+        /* Make the knob always blue */
+        --paper-slider-knob-start-color: var(--google-blue-700);
+        --paper-slider-knob-start-border-color: var(--google-blue-700);
+      }
+    </style>
+    <div class="outer">
+      <paper-slider id="slider" disabled="[[disabled]]" snaps
+          on-immediate-value-changed="onSliderChanged_">
+      </paper-slider>
+      <div class="labels">
+        <div>[[labelMin]]</div>
+        <div>[[labelMax]]</div>
+      </div>
+    </div>
   </template>
   <script src="chrome://resources/cr_elements/cr_slider/cr_slider.js"></script>
 </dom-module>