Docs draft
PlayerProgressBar
Component storyFigma (PlayerProgressBar) ↗React component ↗DSDS entity ↗
When to use it
useSeek bar: accent elapsed, white-alpha buffered and track, optional ad-break ticks.
Variants
state · rest / hover / inactive — The state axis.
Anatomy
track — text.primary at 0.3 node opacity (theme-safe over art).
buffered — text.primary at 0.4.
elapsed + knob — color.accent.base; 14px knob appears on hover/focus.
ad markers — ink.900 ticks; a Show Ad Markers boolean in Figma, data in code.
Design specifications
| height | 4px rest / 6px hover / 2px inactive |
| knob | 14px accent.base |
Accessibility
role=slider with valuetext in seconds; inactive removes it from the tab order.