Page 1 of 1

Implementing a range slider

Posted: Mon Aug 15, 2022 7:43 am
by Captain
Hello! I'm trying to figure out the best way to create a control for setting a range. In practice, that just means setting two values (min & max) with one control, and making sure the max value is always equal to or larger than the min. A vertical slider with two handles would be perfect, with both handles moving if you grab the space between the handles, or if you move one of them and "hit" the other one.

I already created a custom range slider using images & mouse notifications, and it works pretty much perfectly, but the downside is that since it's not a standard VM control, I can't do perform assigns or MIDI learn etc. I also tried putting two standard sliders on top of each other, but the top one always steals the mouse clicks (even if the sliders have no background image), and AFAICS there's no way to get around this. I _could_ put two sliders right next to each other and maybe style the handles so that they look like two halves of a single handle, and that would of course work... but it's not as elegant as having two handles moving along the same Y axis, I think. :)

Maybe there's a simple solution to this, but I just can't see it... Any ideas? Thanks! :)

Re: Implementing a range slider

Posted: Sun Aug 21, 2022 5:49 pm
by shinmai
I wrestled with this same question recently, and ended up just adding two parallelle sliders for the full range and picking the minimum and maximum value based on their values. It's not optimal, but it's fairly user-friendly and reasonably clear, and still supports automagic value (re)storing and MIDI assignments, etc.
I researched trying to overload the VoltageSlider class to try and make a two-handled slider, but unfortunately most of the relevant code is JNI stuff, and can't (trivially) be replicated or modified.

In the past if I've needed specialised controls (like a joystic or X/Y style control for one module) I've used canvas elements and rendered the control states manually, which is very flexible but needs a lot of custom handlig for tooltips, Get/SetStateInformation to (re)store the value, and obv extra work writing the rendering and image manipulation code (Graphics2D isn't exactly feature packed or high-performance :D).

If anyone's figured out a more elegant solution, I, too, would love to hear about them. (Ditto for non-trivially overloading stock VoltageComponent classes)

Re: Implementing a range slider

Posted: Mon Aug 22, 2022 10:32 am
by Captain
Thanks, at least this confirms there probably isn't any obvious easy way to do it (which I just missed) :D

I did toy with a couple of kludge-ish ideas, although I didn't try either of them:

- Build a custom slider using images etc, then put knobs with an invisible skin on top of the slider handles, so that when you click & move the slider (or right-click to open the menu), you are actually interacting with the knobs. When the knobs turn, their values update the slider handle positions, and the knobs move so that they always stay on top of the slider handles. I guess it would work, but I think it's impossible to make the slider handle move perfectly in sync with the mouse pointer, which is not good...

- Put two regular sliders on top of each other, then track the mouse position, and adjust the sliders' Z-order on the fly so that the correct one is always on top and receives the clicks. This would probably work too, but.... it's just getting too complicated, which usually means problems sooner or later.

So in the end I also ended up putting two regular sliders next to each other. Works fine for now, but maybe one day we'll get a proper range slider from CA. :)