How can I disable picking on Slider still allowing dragging the handle?

Questions
1

I am using Babylon.GUI.Slider() to control zoom of the camera in my site. But sometimes, the slider reacts unexpectedly when I touch my smartphone screen, and the screen is zoomed in or out accidentally.

How can I disable picking on a slider? I still want to allow dragging the handle of the slider. It will minimize unexpected reaction of the slider. Following is the basic example of Slider on Playground. You can modify it to show me how to do it:

Thanks in advance.

2

cc @georgie

1 Like
3

hi @warren_bf – the 2D slider doesn’t have the option to disable picking at the moment since it updates the value as soon as pointerDown is detected. That behavior can be introduced behind a flag, feel free to create a PR or one of us can try to do so

4

I tried three ways that ChatGPT suggested. But nothing worked. Following is the Playground.

5

You won’t be able to make it work from the playground, we would need a change to the GUI slider code within Babylon.

Another option is to use 3D GUI Slider instead of 2D – the 3d slider already has picking disabled (i.e. only responds to drag). You can read up on 3d GUI usage in our docs here
Babylon 3D GUI | Babylon.js Documentation

Example playground w slider
Babylon.js Playground

2 Likes