diff --git a/packages/web-components/fast-components/src/slider/slider.styles.ts b/packages/web-components/fast-components/src/slider/slider.styles.ts
index c5b73600aa1..77904d2952d 100644
--- a/packages/web-components/fast-components/src/slider/slider.styles.ts
+++ b/packages/web-components/fast-components/src/slider/slider.styles.ts
@@ -88,13 +88,13 @@ export const SliderStyles = css`
         right: calc(var(--track-overhang) * 1px);
         left: calc(var(--track-overhang) * 1px);
         align-self: start;
-        margin-top: calc((var(--design-unit) + 2) * 1px);
+        margin-top: calc((var(--design-unit) + calc(var(--density) + 2)) * 1px);
         height: calc(var(--track-width) * 1px);
     }
     :host(.vertical) .track {
         top: calc(var(--track-overhang) * 1px);
         bottom: calc(var(--track-overhang) * 1px);
-        margin-left: calc((var(--design-unit) + 2) * 1px);
+        margin-left: calc((var(--design-unit) + calc(var(--density) + 2)) * 1px);
         width: calc(var(--track-width) * 1px);
         height: 100%;
     }