I have a question/problem regarding the ImageBasedSlider in BabylonJS. I have been learning Babylon for about a month now, and I’m not sure how to resolve some GUI issues that I have encountered.
What I want to achieve is an ImageBasedSlider that changes its thumb image based on its value, which is determined by the player. I would like to have different images displayed at values 0, 10, 20, 30, and 40. Additionally, when the player actively moves the thumb to change the value, I want to display an “arrows” image. To tackle these problems, I have tried using the onValueChangedObservable and onPointerDownObservable events. While it works for changing the image based on the value, I’m facing difficulties when trying to add function to change the image by clicking on the slider. The behavior is inconsistent, with the image sometimes appearing correctly, but mostly exhibiting strange behavior. In my Babylon Editor project, there are also occasional flickering issues when the image changes, making the transition not smooth. However, this problem is not as apparent in the online playground.
Sometimes, when I click above the thumb on the slider to reposition it without actually moving it, the thumb completely disappears.
Furthermore, the slider doesn’t always update properly. For example, after moving the thumb, it shows the arrow picture when released, but if I resize the window, it updates to the correct image corresponding to the “number” value.
I have created a Playground example with some random images from Google to illustrate the issue:
ImageBasedSlider changing thumb on Value | Babylon.js Playground (babylonjs.com)
What is the best onSomethingEvent I should use? Should I use something different completely? Should I code custom slider for this problem?
Thank you for any help or guidance you can provide!