Hover effect on line

#1

I’m trying to accomplish the following, if anyone has any advice:

I’d like the user to be able to select a point on a line (picture a number line), once they’ve done that, I want to show a highlighted line that spans from wherever the mouse is currently, on a hover effect (so I guess cursor.X) to the point they’ve selected on the line.

You can see an example of the hover effect etc. here:

https://streamable.com/y9i8l

#2

Ok. I figured out how to do this, however, it’s SUPER super slow. You can see it by plotting a point at -5, and then hovering over the line (but wait like…~5 seconds to see anything.

You can see it here: https://ya5fe5.axshare.com/#g=1&p=inequality - if you watch the interaction in console you can see the condition I’m using on the hover.

Any advice welcome!

#3

Hi!

You might take a look this notched slider post, as it’s doing a very similar thing (especially the third example), except OnDrag instead of OnHover. It’s performance is good.

#4

Thanks @josephxbrick - I had a look, it’s a pretty complex prototype (and definitely super useful for some of the things I’ve been working on), but in terms of your calculations on the width of the filled portion of the slider, it’s pretty much the same math I’m using - I’m not sure why the performance is so much better on yours, but I’m guessing it has to do with a few things:

  1. I need to move the filled portion of the line to start where the point is, but then resize to fill the distance between the point and the mouse cursor
  2. By nature a user will move the mouse cursor, and the idea is to grow that line as it moves, I’m guessing the looping calculation of the position + width is too complex to happen on the fly