Adjusting position of HTML elements?

Help & Support
1

Hi. I want to set my HTML slider to a fixed position like we do with UI canvas that should always be displayed inside the window, and scale up and down with the screen like normal UI elements do. I tried to copy the solution from Camera Follow Path example (Camera following a path | Learn PlayCanvas).

That project is full screen. My project isn’t meant to be run full screen and HTML element seems to go outside when there is some margin between document sides and WebGL Canvas.

image attached.

image
image1758×876 90 KB

How can we solve this?

Also, is there any way to create a vertical slider?

2

The way I would do this is to use the PlayCanvas UI system and anchor it to the top left corner.

Every frame (or on window resize), you can get the canvas corners of PlayCanvas UI element to position the HTML element to the window: https://developer.playcanvas.com/api/pc.ElementComponent.html#canvasCorners

This library by Cem uses a similar technique: PlayCanvas UI Components