diff --git a/frontend/src/lib/components/Slider/slider.tsx b/frontend/src/lib/components/Slider/slider.tsx
index 3a9b042a2..8e596172a 100644
--- a/frontend/src/lib/components/Slider/slider.tsx
+++ b/frontend/src/lib/components/Slider/slider.tsx
@@ -4,6 +4,7 @@ import { useElementBoundingRect } from "@lib/hooks/useElementBoundingRect";
 import { createPortal } from "@lib/utils/createPortal";
 import { Point2D } from "@lib/utils/geometry";
 import { resolveClassNames } from "@lib/utils/resolveClassNames";
+import { convertRemToPixels } from "@lib/utils/screenUnitConversions";
 import { Slider as SliderUnstyled, SliderProps as SliderUnstyledProps } from "@mui/base";
 
 import { BaseComponent } from "../BaseComponent";
@@ -155,8 +156,9 @@ export const Slider = React.forwardRef((props: SliderProps, ref: React.Forwarded
             x:
                 (orientation === "vertical"
                     ? sliderRect.width / 2
-                    : ((activeThumbValue - (min ?? 0)) / range) * sliderRect.width) +
+                    : ((activeThumbValue - (min ?? 0)) / range) * (sliderRect.width - convertRemToPixels(6 / 4))) +
                 sliderRect.left +
+                convertRemToPixels(3 / 4) +
                 3,
             y:
                 (orientation === "vertical"
@@ -261,7 +263,7 @@ export const Slider = React.forwardRef((props: SliderProps, ref: React.Forwarded
                                 "h-5",
                                 "block",
                                 "bg-blue-600",
-                                "z-30",
+                                "z-5",
                                 "shadow-sm",
                                 "rounded-full",
                                 "transform",
@@ -306,13 +308,18 @@ export const Slider = React.forwardRef((props: SliderProps, ref: React.Forwarded
                                 "h-2",
                                 "-ml-0.5",
                                 "-mt-0.5",
-                                "bg-blue-600",
-                                "border-2",
                                 "opacity-80",
-                                "border-white",
                                 "transform",
                                 orientation === "vertical" ? "-translate-y-0" : "",
-                                "z-20"
+                                "z-4",
+                                {
+                                    "border-2 bg-blue-600 border-white":
+                                        Array.isArray(props.marks) &&
+                                        props.marks.length <
+                                            ((orientation === "vertical" ? sliderRect.height : sliderRect.width) -
+                                                convertRemToPixels(6 / 4)) /
+                                                8,
+                                }
                             ),
                         },
                     }}