Slider (for mobile) without the scroll bar


I was wondering if there was a built-in GUI Class to have a slider for mobile without the scroll bar.

I know that there is a Scroll Viewer Class exist but it is not what I need. On some websites on mobile, you can ‘‘swipe’’ smoothly inside a slider/carousel. Is there a way to achieve this result?

Thanks :slight_smile:

Yes,… with a scrollviewer :wink:
You sure can have a slider without a thumb. Or even a slider with an invisible bar…But a slider without a bar would leave you with… well. nothing I suppose :thinking:

1 Like

I guess they want to respond to swiping actions without the obstruction of the slider visuals, right?

1 Like

Yes! Exactly!

I tried experimenting a bit, you can set the bar color and background to transparent… Test scroll viewer | Babylon.js Playground ( But you will still get this “outline”:

I can change a property on the library itself to change the rectangle thickness so there is no outline anymore:

But then, this will still only respond to events that happen over the slider area, which might feel strange to a user that doesn’t see anything:

Through, you can use pointer events to show a little transparent overlay when the pointer enters the “scrollable” area and I think that feels like a nice compromise :smiley:


So, would you like us to add a way to turn that bar outline off on the ScrollViewer so you can do something like this?


The goal would be to make the container fully ‘swippable’ and not only on the scroll bar. To help you understand what I have in mind, you can look at the application : Google Play or AppStore where users can drag content horizontally.

1 Like

Actually, you can just set the bar size to zero. Next you can move on desktop with the mouse wheel.

However, the issue on mobile remains as you said:

You have to first click on the bar to unlock the gesture on the scrollviewer.

Yes, this is I believe the go-around we found for both mobile and desktop. Detect whether you select the root or the sv container and use pointer events.

Edit: Here I just quickly copied the pick logic from this other case study. Commented parts are because the scene was using a 2 cameras approach. But basically the idea is that on pick (either scene,root or sv) you enact or disable the pointer events. Hope this helps,