[Slider] Vertical slider

[jotak]

Hello team,

It would be neat to have a vertical orientation for the Slider component.

In our product (netobserv, which uses patternfly), I am introducing a vertical slider: netobserv/network-observability-console-plugin#344
The implementation may probably sound hacky to you, since I'm simply rotating the PF slider - but I also needed to adapt the input coordinates handling. I tried a cleaner implementation not based on rotation, but my limited skills in CSS made me give up on that. So, sticking with my hack for now, as it seems to be working well.

PS: if you want to have a look, I isolated the diff to Slider.tsx in a single commit: netobserv/network-observability-console-plugin@7634e18#diff-a4a967f9731e75782686c493d2fe88e9be81f4a73c2b2d4d3edf06f8bec9e2bc

cc @andrew-ronaldson

[andrew-ronaldson]

Hey @jotak!
I was looking at the Slider component and I think we could do this as another variation on the slider. Normally this is component is used for numeric values but I know it fits the space well in your example. I can bring this to the next PF sync and ask the team.

[andrew-ronaldson]

Another option could be vertical tabs. This example is inside an expandable section but can be altered.

[jotak]

Hmm I would be less convinced with vertical tabs ... tabs usually show different content, whereas with the slider I want to show the same approximately the same content, with just some variable changes or a tweaked representation (more or less like zooming, much like on a geographic map where this kind of vertical slider is common)

[andrew-ronaldson]

I'm trying to remember the example you made. Do the names of the layers appear next to the slider or is it just the slider? If the topology control buttons are visible (zooms, reset, fit.etc.) it may confused as a simple zoom in/out and not changing scope.

[jotak]

There's a picture in the linked pull request, I can reproduce it here:

I think the labels make it quite clear that this is changing the aggregation scope, here

[andrew-ronaldson]

Thank for clarifying and yes that does help! Something like this roughly?

[jotak]

yes exactly :-)

[andrew-ronaldson]

This is my only concern. Something like a drawer would cover the nodes so it doesn't do this.

[jotak]

Couldn't we set an optional background?

[jotak]

Hello @andrew-ronaldson ,
Any news / plan on that one? This would really help us in network observability