Projection of time

Our slider component needs to be able to project timestamps into the coordinate system of SVG. Also, when a user clicks on the timeline to select a range, we'll need to be able to project coordinates back into timestamps. For this purpose, we need to create two projection functions within our component, which will use a few helper functions and states to calculate the values, from coordinates to time, and vice-versa:

Visualization of important variables and functions for our calculations

While we will use percentages to position our SVG elements on the slider component, the padding on the sides will need to be specified ...

Get Mastering Angular Components now with the O’Reilly learning platform.

O’Reilly members experience live online training, plus books, videos, and digital content from nearly 200 publishers.