Slider3D: OnPointerDownObservable to change thumb position on bar, customisation options


I’m working with the Slider3D as best as I can to use it as a 360 Video scrub bar for use in WebXR. My implementation is 90% complete but falling a bit short of the HTML scrub bar I have constructed.

  1. When the bar is ‘clicked’ the thumb does not snap to its position as it does with the Babylon 2DGUI version.

  2. Customisation is limited concerning scaling. I need to change the size of the thumb and bar so they are the same height. I have used .scaling but it increases the size of the thumb exponentially.

Probing into the Slider3D object through console.log in DevTools did reveal attributes concerning those thumb scaling and I managed to adjust as desired but was unable to target these through my code. Perhaps these just need to be made available to edit?

Thanks for reading.

This PR will let you access the bar, thumb and backplate meshes of the Slider3D control:

As far as snapping is concerned, the Slider3D control comes from the MRTK library, so I don’t know if we can modify the behavior (I imagine the library is standardized)…

1 Like

If that enables me to change the scaling property here that would be great :slight_smile: Thanks for looking into this. I’ll consider hacky solutions to snapping such as changing the thumb value based on position of bar clicked if possible.

I’m not sure what’s the type of the object you dumped the properties for?

It’s from _sliderThumb here, I print the ‘Slider3D’ object.

Ok, so in this case, once the PR is merged, you will be able to do your_slide3D.sliderThumb.scaling = ....

1 Like