I am currently developing a web app in meteor with angular. I have an html range element that moves along with a video (serving as a progress bar for the video). I want to be able to append pins to the progress bar that keep track of a certain time in the video for the user. So far, I have all this working.
However, I now want to be able to hover over these pins and display some data. Until now I have been using pointer events: none; to prevent the pins from making the progress bar un-clickable.
But,this also prevents me from using hover on the pins. Long story short, is there a way to turn off pointer events for clicks (so that the progress bar under the pins gets clicked instead), while still retaining the ability to use hover events on the pins?
For reference I included a picture of the progress bar filled with pins. The problem is if pointer events are turned on, you won't be able to select parts of the video in the large cluster of pins at the beginning. However, with pointer events set to none, I can't use hover events.
