Range and video are confronting-CodePudding

I am writing a video player. As a timebar I use a range. As video is playing, range is changing too. But I want to change it in the opposite way. I want range make video change its currentTime. But, because they change each other, I can't move a thumb. I'd tried setting Interval null but it didn't work. Give me a hand with this, please.

$(document).ready( function () {
$("#PlayerVideo").on("loadedmetadata", function (event) {
            Video = $("#PlayerVideo")[0];
            
            Duration = Video.duration;
            hours = Math.floor(Duration / 60 / 60);
            mins = Math.floor((Duration - hours * 60 * 60) / 60);
            secs = Math.floor(Duration - mins * 60);
            $("#durTime").html(hours   ":"   mins   ":"   secs);
            
            
            // display cur time 
            Interval = setInterval(
                function () {
                    Play();
                }, 250
            );
        });     

        $("#TimeRange").on("input",
            function()
            {
                $.when().then(
                    function()
                    {
                        Interval = null;
                    }
                ).then(
                    function ()
                    {
                        Video = $("#PlayerVideo")[0];
                        Video.currentTime = $(this).val()*Duration;
                        console.log("cur time is "   Video.currentTime);
                        CurTime = $(this).val()*Duration;
                    }
                ).then(
                    function ()
                    {
                        Interval = setInterval(
                            function () {
                                Play();
                            }, 250
                        );
                    }
                );    
            }
        );

        function Play()
        {
            Video = $("#PlayerVideo")[0];
            CurTime = Video.currentTime;
            console.log(CurTime);
            hours = Math.floor(CurTime / 60 / 60);
            mins = Math.floor((CurTime - hours * 60 * 60) / 60);
            secs = Math.floor(CurTime - mins * 60);
            $("#curTime").html(hours   ":"   mins   ":"   secs);
            $("#TimeRange").val(CurTime / duration * 100);
        }
});

CodePudding user response：

Try adding $(this).trigger('change'); just after you are calling Play() and remove $("#TimeRange").val(CurTime / duration * 100);

CodePudding user response：

I changed $(this) to $("#TimeRange"). And added division by 100 when setting a new value.