Need a vertical slider, not a scroll bar

I’m converting an industrial application to Linux, and I’m in real need of working vertical sliders. Scrollers won’t fill the need This is the first thing I noticed when I started Xojo and started adding in controls to main form. I’m a long time Visual Studio 6 thru VS 2019 VB wrangler, but only on Xojo a few weeks. So I might have missed something obvious, and if so I need to be steered the right way. I Poked around in the forum first and couldn’t find a solution.

  1. How to make a real vertical slider that starts at 0 at the bottom, maximum at the top, and preferably tick marks both sides. For instance I need large ticks every 25 units and small ticks every 5 units.

  2. I need control over the color of the “Filled” line that fills in between slider current position and “0” position. Actually we need that to be “no fill” if possible, or we need to control color to fit the theme of the GUI.

  3. Even when slider is setup for vertical (height bigger than width on IDE) it shows up as a wonky horizontal slider in the IDE. Is there a way to make the vertical slider show up properly in IDE?. I can’t believe somebody at Xojo thought it was OK to do that, so I probably missed something simple.

Thanks!

Alex Restrepo made a “Round Slider” control that I used heavily in a project a decade ago in vertical orientation. I still have the original files but it looks like it’d take a bit of work to bring them into Xojo compatibility.

1 Like

I am not sure what you are seeing in the IDE. This is from a recent project, slider selected in the IDE.
image

This is on linux.

Yep, I’ve got the IDE dimensions set like yours, but the slider is displayed as a squashed up horizontal slider in IDE, displays as vertical slider when program is run. MINIMUM position is always at top. Yes you could do an value inversion in code to correct position, but the fill line is always drawn top down…which is backwards for a lot of applications. We want minimum at the bottom, and need Major and Minor tick marks (Maybe have to add those manually along side the slider).

I’m on Linux Mint 20.1 (Ubuntu 20.4) with Cinnamon.

Not at that PC right now but when I get there I’ll grab a pix.

1 Like

That’s cool! That’s about what I have to do in my application, except with tick marks.
Thanks for sharing!
-J

That one is upside-down. Max=0, Min=-1000, Default = -750. Changing the colors (not sure what sets the tick-color):
image

The orange file line still goes from MIINIMUM position to slider handle. We somehow need that gone or gain control over its color. If that line is getting filled, it needs to go from MINIMUM at the bottom of the slider, filling UP to the slider handle.

I think the fill line is picking up color from the system desktop theme. I can play around with the system theme colors and the fill line color changes, but we need the color locked down in code. Somehow.

I think it really depends on the OS as to what options you have. For instance I had to use a declare to get a vertical slider to show and work in the macOS.

If you want more control, you may end up having to learn some declares or roll your own.

This is interesting. Somebody please explain what’s going on here. At run time, both sliders are vertical. But in IDE, the slider on the right is wonky. How does this happen?!

Answer: The slider on the left was placed onto main form container, then project saved, Xojo Restarted and project loaded into IDE. Slider on right was added to container without saving/ restarting Xojo.

Are we going to have to do this every time we add a slider control?? Is there a way to prevent having to restart Xojo every time we add a control?? (Asking for the accountants in front office deciding on purchasing several licenses).

Xojo_TestSlider_IDE_LinuxMint20p1_Cinnamon|690x468 Xojo_TestSlider_Run_LinuxMint20p1_Cinnamon

Second slide got lost on last message. I guess only one screenshot at a time.

This appears to be an IDE display issue in the Window layout editor. It looks like the Slider is not requesting a full redraw after its size has been changed. As you’ve seen it will work when you run the project. It also looks like it will redraw itself if you switch to another Window layout and back.

I’ve created Feedback Case 64129 for this.

@Paul_Lefebvre/@Greg_O_Lone , in earlier macOS Xojo Versions we had been able to have a vertical Slider. But not now. Maybe a bug? https://developer.apple.com/documentation/appkit/nsslider/1527901-vertical

You need a Declare on later versions of macOS, which is noted on the Slider doc page.

And this is now fixed for the next Xojo release.

2 Likes

OK, one issue with slider control resolved. Now I need to know how that filled line works between slider handle and MINIMUM position. This is for an industrial GUI, and never, ever have I seen a vertical slider with minimum position at the top…You don’t fill a glass of water from the top down, and the same concept applies here.

  1. How do we get the minimum position of the vertical slider to be at the bottom?

  2. How to control color of that line fill? Other than messing around with system theme colors, which we can’t do.

  3. What does “Transparency” property do? In the example shown, one slider has transparency on, the other has it turned off. Main form has a background color added. Why do both sliders look the same? If Transparency isn’t supported, why is it showing me that option?! Or is that property intended for something else?

  4. Is there a way to control the shape of the slider handle? (We have strict design specs to meet here). It should be rectangular or rectangle with triangular points both sides if possible.

  5. Is there a way to get tick marks both sides? Major/ Minor ticks would be a real help for our application.

  6. Now I’m just dreaming but a split double slider would be a neat add-on…Or if you had a way to have just one half a slider handle rendered, and then stick two sliders down back-to-back. That would be really neat.

SliderTest2_Run_Transperency

For reference, this is the same Qt vertical slider element used in a stock install of Gambas3. It has the proper placement of minimum end at the bottom, it displays vertical mode right away as you adjust size in IDE, tick marks available both sides, and transparent / opaque settings work. Still no control over fill color, no control over handle shape and no major/minor tick marks, but it is closer to what we need. Looks like we’d have to build our own slider control if we use Xojo.

Vert_Slider_Gambas_Stock

It only takes a few minutes to make your own slider with a canvas.
See attached pic. This one I just made and it starts at 0 on the bottom up to 255 at the top and fills the bottom portion with the color of my choice. It is completely customizable by you.
You could add a canvas on each side to draw the tick marks and make them any size or position that you want. Let me know if need a sample project from me.
Capture2

3 Likes

That looks good Gary! Yes I’d love a sample if you can take a minute.

Well, I just realized that you said you were on Linux. I only use Windows. Will a Windows project in 2020r2.1 be Ok? It should still work fine in Linux.

While it is easy to deal with, that begs the question of why the framework does not handle that for us to give a consistent X-platform (and X-OS version) experience when the Height is > width on recent Mac OS versions.

-Karen

Forum for Xojo Programming Language and IDE. Copyright © 2021 Xojo, Inc.