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

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

Index: ui/webui/resources/cr_elements/cr_slider/cr_slider.html
diff --git a/ui/webui/resources/cr_elements/cr_slider/cr_slider.html b/ui/webui/resources/cr_elements/cr_slider/cr_slider.html
index 80ff746aded4f6e4470056348e066640b50977bb..6f6bfc7fe79f13f2b10e6143a443510946d544fb 100644
--- a/ui/webui/resources/cr_elements/cr_slider/cr_slider.html
+++ b/ui/webui/resources/cr_elements/cr_slider/cr_slider.html
@@ -4,11 +4,42 @@
 
 <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. */
+        --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>