Can't drag ionRangeSlider slider while updating

[AbdelhakElbouadi]

I am using ionRangeSlider to create a media player, I bind it with the track playing so whenever the track is playing the slider is updating automatically, but the problem is when I want to drag the slider it can't get dragged and if I stop the track and with that the updating I can drag the slider.

[IonDen]

Hi, unfortunately. This version of slider is doing full self re-draw on each update. So it is impossible to interact with it until update is finished.

[dharper08]

I just discovered this plugin about an hour ago so my comments may be naive at this point. I am doing the exact same thing as the OP and am trying to migrate from a simple (display only) progress bar to a situation where the user can also manually reposition to a different point in the track. There is an onStart callback and I assume this would be called when the user first touches (or clicks) the slider. I would use this to disable updates to the slider position until I got an onFinish callback, at which point I would read the new value, reposition the track to the selected point and resume updates. Is this viable?

[AbdelhakElbouadi]

I'm sorry i can't remember how i did it, but as far as i remember the slider cannot let you interact with it until update is done this is because it is the default behavior for html slider and ionSlider is just wrap over it. So i solve it by handling the native html slider i didn't do much with the ionSlider i can't remember i did anything in it's onUpdate handler.Hope that help in case you didn't solve it send me a message i will search for the original code where i did it and deliver it to you.

[dharper08]

After several hours of running experiments I now realize that the approach I suggested won't work. It's a shame too - this was the best looking solution I had found so far. If you have time to track down what you did I would really appreciate looking at it - my email is in my profile. In the meantime I'll keep trudging on and see if I can come up with something. Thanks.

[AbdelhakElbouadi]

Hi Sorry i had a very pressing project because i am a freelancer so i wasn't able to respond at time. In case you still need, here it is: for the html elements:

for the code that do the magic : var mouseDown = false; $(".middle .progressSlider.active").on("mouseenter", function(e){ //A global variable defined in another script updatingSlide = true; });

$(".middle .progressSlider.active").on("mouseleave", function(e){ updatingSlide = false; });

$(".middle .progressSlider.active").on("mousedown", function(e){ mouseDown = true; });

$(".middle").on("mouseenter", function(e){ $(".middle .progressBar").hide(); $(".middle .progressSlider.active").show(); });

$(".middle").on("mouseleave", function(e){ $(".middle .progressBar").show(); $(".middle .progressSlider.active").hide(); });

$(document).on("mouseup", function(e){ mouseDown = false; }); for the ionSlider part: trackSlider = $("#trackRange"); trackSlider.ionRangeSlider({ skin: "big", min: 0, hide_min_max: true, hide_from_to: true, step: 1, onStart: function (data) { //console.log("Data Duration=>" + data.max); }, onChange: function (data) { //If there is no track playing /player is a class that handle the audio player operations like play, pause, stop, playing, notPlaying, changeRecord, etc...just an interface for the html audio element / if(!player.notPlaying()){ player.setCurrentTime(data.from); var width = $(".irs-bar.irs-bar--single").width(); $(".middle .progress").css({"width": width + "px"}); }else{ //data.reset(); } }, onFinish: function (data) { console.log("From OnFinish"); }, onUpdate: function (data) { } });

I hope this help i am really happy to help you more if i can, anyway if you still help i am glad to give you a boost.Good Luck.

Le mar. 2 juil. 2019 à 17:34, dharper08 notifications@github.com a écrit :

After several hours of running experiments I now realize that the approach I suggested won't work. It's a shame too - this was the best looking solution I had found so far. If you have time to track down what you did I would really appreciate looking at it - my email is in my profile. In the meantime I'll keep trudging on and see if I can come up with something. Thanks.

— You are receiving this because you modified the open/close state. Reply to this email directly, view it on GitHub https://github.com/IonDen/ion.rangeSlider/issues/617?email_source=notifications&email_token=AGVUKKVPVE3EZAW5SP7G6HDP5OGTLA5CNFSM4HE3PJGKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGODZCAPEI#issuecomment-507774865, or mute the thread https://github.com/notifications/unsubscribe-auth/AGVUKKSMSMLI54TSEFG2ARTP5OGTLANCNFSM4HE3PJGA .

[dharper08]

I'm the one that's sorry - I resolved my problem and forgot to update my post to indicate that. Hopefully, others with the same issue may take advantage of your solution. For what it's worth, I ended up using the seekbar.js package from dhtmlgoodies.com. It's a small package (<350 lines) and the code was easy to follow. I ended up making a small change to it to create a global variable that would let me know when the handle was being dragged so that my external code would stop trying to update the position. Easy to do and it's now working perfectly in my application. Thanks again for taking the time to respond.