Multiple knob/range Slider

Newbie & Debugging Questions
#1

I will make this short and sweet. :slight_smile:

I have a custom map menu, with a bunch of sliders that the player can adjust so that a procedural world generator can use those values to create a world based on what the user wants.

While I am familiar with creating Slider objects (in libGDX), I wonder if there are any slider bars that allow me to have 2 adjustment knobs on it.

Much like what you see here, minus the range stuff:
http://jqueryui.com/demos/slider/#range

I have done a bit of browsing to try and find answers, and there is nothing significant that I have found so far.
I think the only way I will be able to make it work is to make my own MultiRangeSlider class which would extend the Slider class.
The code inside of the Slider class looks awfully scary at first glimpse to me because I am far from being a great programmer, but I think it would be worth tinkering around to see if I can create some magic.

The purpose of the multi-knob slider would be for division of land into different terrain types.
For example:
plainsSlider = 10
forestSlider = 55
mountainsSlider = 35

If the map size was set to 500, then:
plainsSlider = 10% of 500 is 50
forestSlider = 55% of 500 is 275
mountainsSlider = 35% of 500 is 175

The resulting values would determine the terrain tile threshold values in the world generator. So in this case, there would be a heavily forested mountainous map with few open plains.

Any help on the matter would be greatly appreciated. I do not ask for a copy/paste of code, but merely some direction to help me solve the problem.
It is not 100% necessary that I work out this problem, as I am happy to just use 3 seperate Slider’s, but I just think that one bar would take up less space, would make more sense to the user, and it would look better.

NOTE: I should note that I am using LibGDX too :wink:

#2

PROGRESS:

I have made slight progress.

I now have 2 knobs showing on the bar, both of them move, but not independently just yet.

Now I need them to move independently, which shouldn’t be too hard. Then I need to do all the fun maths stuff to calculate the individual slider ranges so that they can’t overlap one another.

#3

PROGRESS:

I have now made it so that you can independently move one knob or the other.
I have also made it so that if you move the first knob into the 2nd knob, it will push the 2nd knob across, and vice versa.

There are still a few issues such as it being difficult to grab hold of the sliders, as it only lets you move a slider if your mouse clicks directly within the size restraints of the knob itself. The problem is that the mouse moves faster than the knob can update, so it ends up being that the knob gets left behind. I have thought of a few ways to fix this and will try them out.

After the knobs are easy to move around, I will then work out the maths to record the ranges in between the knobs…gotta leave the easy stuff for last :stuck_out_tongue:

Once it is all working, I will share the code here with you all, so you can use it in your own projects, I am sure you will find it handy.

#4

HOORAY, IT’S DONE (For what I need at least)

The slider is actually setting 3 values that I can use as percentages to determine which parts of my game map will have plains, forest and mountain terrain types.

You can’t see the mouse cursor in the video as I forgot to turn mouse cursor on…although it’s not all that necessary anyway.

u8n7HkDpAYc

The code is not 100% complete, as I still need to fix up the vertical code I think. It needs a real good clean up and it is also far from being neat, or efficient in the way it is written, since I was originally doubting myself and thinking that I’d just dabble with the idea, not caring much about how well it was written.
The main thing is, it works, that is all that matters to me :stuck_out_tongue:

Here is the class so far for anybody interested :wink:

http://pastebin.java-gaming.org/b99f72d0482