[MD settings] align sliders with margin

chrome/browser/resources/settings/controls/settings_slider.html

 <link rel="import" href="chrome://resources/html/polymer.html">
 <link rel="import" href="chrome://resources/cr_elements/policy/cr_policy_pref_behavior.html">
 <link rel="import" href="chrome://resources/html/assert.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-slider/paper-slider.html">
 
 <dom-module id="settings-slider">
   <template>
     <style>
       :host {
+        --calculated-paper-slider-height: var(--paper-slider-height, 2px);
+        /* Counteract the margin on #sliderContainer in paper-slider.html. */
+        -webkit-margin-end:
+            calc(-15px - var(--calculated-paper-slider-height)/2);

[dschuyler, 2017/04/18 00:55:24]

Lines 10 through 13 can be replaced with:

-webkit-margin-end: -16px;  /* Overlap margin. */

If that is preferred. It's less precise, but it's much easier to read.

[stevenjb, 2017/04/18 15:53:38]

This seems fine to me.
nit: space surrounding '/'

         display: inline-flex;
       }
 
       cr-policy-pref-indicator {
         -webkit-margin-start: var(--settings-control-spacing);
         align-self: center;
       }
 
       #labels[disabled] {
         color: var(--paper-grey-400);
@@ skipping 45 matching lines @@
           min="[[min]]">
       </paper-slider>
       <div id="labels" disabled$="[[disableSlider_]]">
         <div id="label-begin">[[labelMin]]</div>
         <div id="label-end">[[labelMax]]</div>
       </div>
     </div>
   </template>
   <script src="settings_slider.js"></script>
 </dom-module>