Binding value to video `currentTime` and slider causes playback issues

[bennymi]

Describe the bug

When binding a value to both the slider's value as well as a video tag's currentTime, the playback stops working properly. The video continuously pauses and plays repeatedly.

Link To Reproduce

Reproduction:
https://svelte.dev/playground/cb701664e7fa4a618e4db8afdec4ba78?version=5.20.5

Steps to reproduce the behavior:

1. Play the video

Expected behavior

The video should play smoothly, and the slider should also update smoothly.

Device/Environtment

Chrome

[simeydotme]

Hi @bennymi
thanks for using the Range Slider!
So a couple of a things..

firstly, I'm not convinced this is the correct tool for the job! haha. but still u can always cut a toothpick with an axe ;)
secondly, this is not a bug, but I appreciate it's bugging you :D

The first thing I did was unbind the slider, and check your video's value; and you can clearly see the video is using 7 significant digits!

So this made me look at your slider, which is using the default setup. the default setup is a slider going from 0-100, with a step of 1.

If the video is setting the value to 0.16667 for example (~1 frame) ..
then the slider will attempt to update ..
but the slider's closest value would be 0 ..
so the slider, internally, tries to re-align to 0 ..
therefore your video time resets to 0 as they are bound.

so the solution is;

• set the step to 0.00001` to match the video
• update the precision if you want to be able to see the correct value (internally I only show 2 digits by default)

And you can see that working here.

I have played a bit more, and you can probably get away with the step being 0.001 , but i'm not sure if you have a high/variable framerate video if it will still work.

Hope you found this helpful!
please recommend the slider to your friends! ;D