Skip to content

TimeRulerProps

Props for the TimeRuler component.

  • TimeRulerConfig
PropertyTypeDescriptionInherited from
audio?HTMLAudioElement--
autoRender?booleanWhether to automatically re-render when viewport or configuration changes. Default trueTimeRulerConfig.autoRender
autoResize?booleanWhether to automatically resize canvas pixel resolution when container dimensions change. Default trueTimeRulerConfig.autoResize
backgroundColor?stringCanvas background fill color. Default "transparent"TimeRulerConfig.backgroundColor
canvasProps?HTMLAttributes<HTMLCanvasElement>--
className?string--
color?stringPrimary color for axis lines, tick marks, and text labels. Default "#a0a0a0"TimeRulerConfig.color
devicePixelRatio?number | booleanDevice pixel ratio scaling factor for HiDPI/Retina displays. Default window.devicePixelRatioTimeRulerConfig.devicePixelRatio
font?stringCSS font specification for time labels. Default "10px monospace"TimeRulerConfig.font
height?string | number--
labelColor?stringSpecific color override for text labels. Default colorTimeRulerConfig.labelColor
minMajorPixelSpacing?numberMinimum pixel spacing between adjacent major tick labels. Default 75TimeRulerConfig.minMajorPixelSpacing
navigation?boolean | NavigationOptions--
onReady?(viewer: TimeRulerViewer) => void--
playheadClassName?string--
playheadStyle?CSSProperties--
renderer?TimeRulerRendererName | TimeRulerRendererVisual renderer: standard tick lines or segmented boxes. Default "ticks"TimeRulerConfig.renderer
scope?Sonoscope | null--
showPlayhead?boolean--
source?AudioSource--
style?CSSProperties--
tickColor?stringSpecific color override for tick lines. Default colorTimeRulerConfig.tickColor
tickPosition?"both" | "bottom" | "top" | "inside"Tick mark position relative to the ruler baseline. Default "top"TimeRulerConfig.tickPosition
timeFormat?TimeFormatModeNumeric timestamp formatting mode. - “auto”: Adapts precision based on zoom level. - “seconds”: Displays raw seconds (e.g., 12.5s). - “timecode”: Broadcast notation (mm:ss.ms). - “hhmmss”: Clock time (hh:mm:ss). - Custom function (sec: number) => string. Default "auto"TimeRulerConfig.timeFormat
url?string--
width?string | number--