user-interfacemathgml

Need a little help on an equation for a GUI "Slider"


This is a small equation that's giving me a headache, I'm close to solving but- Ugh. I'll try to be prompt.

I have this:

Difficulty Settings Slider

As you see it is a slider that goes from 0.1x to 3x Difficulty.

I have other sliders like this, for audio for example that just go from 0% to 100%.

That works fine.

However, with a minimum value greater than 0 my math breaks a bit and I'm stuck not being able to perfectly slide the bar all the way to the bottom because it isn't 0 and it is 0.1 instead.

I want to make it to where even if the minimum value isn't 0, the bar goes all the way to empty.

Here is the relevant equations/calculations at play:

var percent = val/val_max
var adjustment = ((x2-x1)*val_min)-((((x2-x1)*val_min)*percent)*val_min)
var x2_final = (x1+((x2-x1)*percent))-adjustment

percent is the percentage of the current value relative to the max value (0.0 to 1.0)

adjustment is trying to find how much to additionally add/remove from x2_final based on the current value to keep the slider properly scaled when the minimum value isn't 0. (This is where the problem is)

x2_final is the final (in pixels) coordinate where the slider should stop based on the previous calculations.

Initially the slider would over fill when full (that was fixed by the current adjustments) but now the slider doesn't go all the way empty and leaves a "0.1" worth of slider.

I don't usually use forums or stackoverflow as I try to figure out things on my own but so I apologize if my explanation needs work.

Here is what the slider looks like when I set it as low as it will go:

Slider Minimum Position

Also, if I have more math related problems, are there any good tools I can use to help simulate my calculations like this so people can run it for them selves or something?

Thanks in advance!


Solution

  • Solved it!

    So my equation was a bit wrong for the adjustment.

    As now it looks like this:

    var percent = val/val_max
    var percent_min = val_min/val_max
    var adjustment = ((x2-x1)*percent_min)-(((x2-x1)*percent_min)*percent)
    var x2_final = (x1+((x2-x1)*percent))-adjustment
    

    And now the slider properly fills to full as well as empties to the bottom, regardless of what the minimum value is.

    But I also noticed then the bar as I was sliding it wasn't following my mouse. So to fix that I had to go later in my code where I update the current value of the slider as the user clicks and changes it...

    var mouse_x_percent = round2((mouse_x-x1+adjustment)/(x2-x1+adjustment),2)
    

    Just had to add the adjustment to both sides of that calculation (getting the mouse_x's percentage relative to the beginning and end of the slider itself which would then be used to calculate the new value by multiplying the mouse_x_percent with the max value).

    (Round2() takes two numbers, the first being the number to round, and the second to what decimal place)

    Always love solving a problem, I hope this helps someone else.