Slider (for mobile) without the scroll bar

Questions
1

Hi!

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:

2

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
3

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

1 Like
4

Yes! Exactly!

5

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

image
image470×614 71.9 KB

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

image
image583×599 75 KB

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:
invisible-slider

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:

invisible-slider-with-pt-events

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?

2 Likes
6

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
7

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,

2 Likes