How to solve these two problems in my code?

Question

What am I doing?

Well, I’m creating a slider (<input="range">) in which you hover over it and it shows its value in a <div>and that <div> has the goal of following the slider as the user moves it, but this <div> should follow in a very smooth way, this slider is similar to the developer @tadaima. Already my slider is in my account Codepen.

The image below is of the slider with its respective value within a <div>:

The first problem (not pleasant movement)

The first thing wrong that is happening on the slider is when you move it and the <div> does not accompany it in a gentle way, it will catch up sometimes, if you move the slider very slowly to <div> can keep up with it but the intention is to move fast or not to follow it in the same way in a smooth way.

The second problem (going too far)

The second problem is that when moving the fast slider to right / left to <div> goes a little more than it should, because the least it should go is up at the beginning of the slider and already the most it should go is up at the end of the slider and not a little more.

The image below shows the <div> going a little further than it should (this happens when you move the slider fast to the left / right as much as possible):

These two problems above in my code are the ones that "I can not solve", because I have tried in several ways and without result who can help, I thank you very much!

NOTE: In case there’s any way I can do better than what I’m doing, be it with Javascript pure or Jquery or with whatever technology all help is welcome!

Answer 1

For the first problem in css #ballon can reduce time or remove line:

transition: left 250ms linear;

For the second problem in oninput button control:

1. Stay with the Ballon fully within the projection of the control button width, where 250 is the width of the control button (300) less and the width of the Ballon (50):

balloon.style.left = buttonControl.value * 250 / 100 + 'px';

2. Stay half of Ballon in the projection of the width of the control button, where 25 is half the width of Ballon:

balloon.style.left = buttonControl.value * 300 / 100 - 25 + 'px';

3. Stay centered with the ball of the control button, where 270 is the width of the control button less ball width and 10 is half the width of the ball with the width of the Ballon.

balloon.style.left = buttonControl.value * 270 / 100 - 10 + 'px';