Hi All,
When I play with slider and release the button I see the slider is still attached to mouse and moving mouse in the screen keeps moving the slider left and right. Please note this doesn’t happen always but most of the time I am able to recreate this. Any help on am I missing something ?.
rgds
Kamal
Do you have a PG example? Are you using the bjs GUI? In case, do you use the slider inside a stackpanel? In case, I had something similar and would be able to help (may be)…
var keys = [];
var poanimation = new BABYLON.Animation("animation", "rotation.y", 30, BABYLON.Animation.ANIMATIONTYPE_FLOAT,
BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE);
var reanimation = new BABYLON.Animation("animation", "rotation.y", 30, BABYLON.Animation.ANIMATIONTYPE_FLOAT,
BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE);
var roanimation = new BABYLON.Animation("animation", "rotation.y", 30, BABYLON.Animation.ANIMATIONTYPE_FLOAT,
BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE);
// UI
var advancedTexture = BABYLON.GUI.AdvancedDynamicTexture.CreateFullscreenUI("UI");
var UiPanel = new BABYLON.GUI.StackPanel();
UiPanel.width = "220px";
UiPanel.fontSize = "14px";
UiPanel.horizontalAlignment = BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_RIGHT;
UiPanel.verticalAlignment = BABYLON.GUI.Control.VERTICAL_ALIGNMENT_TOP;
advancedTexture.addControl(UiPanel);
params = [
{name: "vol", anim: poanimation},
{name: "Rst", anim: reanimation},
{name: "crs", anim: roanimation}
]
params.forEach((param)=>{
var header = new BABYLON.GUI.TextBlock();
headers[param.name] = header;
header.text = param.name;
header.height = "40px";
header.color = "white";
header.textHorizontalAlignment = BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_LEFT;
header.paddingTop = "10px";
UiPanel.addControl(header);
var slider = new BABYLON.GUI.Slider();
sliders[param.name] = slider;
slider.horizontalAlignment = BABYLON.GUI.Control.VERTICAL_ALIGNMENT_TOP;
slider.minimum = 0;
slider.maximum = 1;
slider.color = "yellow";
slider.value = param.anim.weight;
slider.height = "20px";
slider.width = "200px";
UiPanel.addControl(slider);
slider.onValueChangedObservable.add((v)=>{
if (param.name == "vol") {
particleSystem.ps = v;
}
if (param.name == "rst") {
particleSystem.rs = v;
sliderval.rs = v;
}
if (param.name == "crs") {
sliderval.temp = v*20;
if (v > 0) {
gcamera.alpha = v*20;
}
}
})
param.anim._slider = slider;
});
Please find a a sample code above.
Ok, but this code doesn’t really tell me the story. As you say,
However, I believe I understand you must have the same case I had.
I solved it by detaching the camera when moving on the slider and reattaching it when moving out.
Try something like this (line 49 to 57 in this PG):
Let us know if this helps,
@mawa it didn’t help Issue is when click in progress I take it out of window and bring it back in then this issue happens… Please note from logs I see no other event is detected.
I see. Is it attached to the edge of the canvas and when you move out of the window the slider continues to be ‘grabed’ ?
Did you try to add this?
sv.isPointerBlocker = true;
or add a “window.addEventListener” for your canvas controls?
I’m pretty sure one of these should work and I’m also pretty sure there is already a thread in the forum that covers this. I will try find it for you…
@mawa Tried both the options but still do miss it once in a while…
I think this should fix your issue:
scene.getEngine().onCanvasPointerOutObservable.add(() => {
slider._forcePointerUp();
})
Let me know if it doesn’t.
@DarraghBurke when I hold click and move outside release click and come back in still its stuck, now if I take it out without holding click then it gets released.
That’s funny because it never happened to me (and I’m actually unable to reproduce).
Are any of these events/solutions we gave you appearing in the console log when you make your move?
See, my sliders mostly always have an ‘exclusion zone’ so you can never move the mouse straight from the slider area outside the canvas. Also, did you try to remove the parameters for your contextual slider? May be the bug occurs because it’s loosing context?
I sure do hope either @DarraghBurke or @sebavan will be able to further help here. I’m afraid this is slowly going beyond my expertise.
Wishing you a great WE anyway and don’t loose hope 
I’m sure someone in this forum will be able to finally help you out with this 
What browser/device are you on? I do not repro this on Edge for Windows or MacOS. Here is the playground I am testing with, based off the one Mawa shared earlier:
@DarraghBurke After some more testing have some observation…
Add HTML to iframe this issues is seen
As a seperate HTML page this issue isn’t seen.
rgds
Kamal
Now, that’s interesting. Obviously, the iframe already acts like a ‘canvas’ (well, a frame). So this can explain why any action calling on the ‘window’ would actually not apply to the iframe.
Did you try the thing of creating a small exclusion zone around the slider, to make sure any action taken triggers (within BJS) and before you move out of (well) the iframe? As long as the action triggers inside the canvas before moving out of the window or iframe, it definetely should work and solve your issue.
You might try listening to a “blur” event on either contentDocument or contentWindow of the IFrame: HTML DOM IFrame Objects (w3schools.com)
Any luck getting this to work?
@DarraghBurke Sorry for the delay was traveling. Since it was near the edge this was happening I gave a padding from the edge and now this issue is not there.