WebUI: cr-slider, adjust markers location to match up with bar

Bug: 908388
Change-Id: I0a93f9c648610331db2de63596f3349dd3d07333
Reviewed-on: https://chromium-review.googlesource.com/c/1351535Reviewed-by: Demetrios Papadopoulos <dpapad@chromium.org>
Commit-Queue: Esmael El-Moslimany <aee@chromium.org>
Cr-Commit-Position: refs/heads/master@{#612073}

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

@@ -11,6 +11,7 @@
   <template>
     <style include="cr-hidden-style">
       :host {
+        --cr-slider-bar-height: 2px;
         -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
         cursor: default;
         user-select: none;
@@ -36,19 +37,21 @@
 
       #barContainer {
         border-top-color: var(--google-blue-600-opacity-24);
-        height: 2px;
+        height: var(--cr-slider-bar-height);
         margin: 0 16px;
         position: absolute;
         top: 15px;
         width: calc(100% - 32px);
       }
 
+      #barContainer div {
+        top: calc(-1 * var(--cr-slider-bar-height));
+      }
+
       #bar {
         border-top-color: var(--cr-slider-active-color, var(--google-blue-600));
-        height: 2px;
         left: 0;
         position: absolute;
-        top: -2px;
         transition: width 80ms ease;
         width: 0;
       }
@@ -98,7 +101,6 @@
         pointer-events: none;
         position: absolute;
         right: 0;
-        top: 0;
         @apply --layout-horizontal;
       }