diff --git a/components/chapters/ChapterTicks.tsx b/components/chapters/ChapterTicks.tsx index c83de0b4..04db078e 100644 --- a/components/chapters/ChapterTicks.tsx +++ b/components/chapters/ChapterTicks.tsx @@ -14,12 +14,15 @@ interface ChapterTicksProps { durationMs: number; /** Tick colour. */ color?: string; + /** Tick height in px — slightly less than the slider track thickness. */ + height?: number; } export function ChapterTicks({ chapters, durationMs, color = "#fff", + height = 6, }: ChapterTicksProps) { const markers = chapterMarkers(chapters, durationMs); // One chapter (typically a single marker at 0) is not worth marking. @@ -36,9 +39,10 @@ export function ChapterTicks({ style={{ position: "absolute", left: `${marker.percent}%`, - top: "25%", - height: "50%", - width: 2, + top: "50%", + marginTop: -height / 2, + height, + width: 1.5, backgroundColor: color, }} />