Need Help for My Progress Bar Prototype

Hi all,

I made a prototype with a progress bar that could be dragged right. My problem is the front bar is always over the drag button on drag X, which seems really weird. T-T

The right edge of the front bar is not supposed to exceed the area of the drag button.

I’m desperately in need of a solution. Can anyone kindly help?

Thx so much!

Progress Bar on Drag Problem.rp (51.7 KB)


Here is a fix:
Progress Bar on Drag Problem 2.rp (71.1 KB)

You were setting the size of the front bar to the x-location of your drag button, but the drag widget.x variable is relative to the browser window, not the x-location of your widgets (front bar or background bar). Since the front bar is at x=24, you end up setting its size 24px too large. To demonstrate this, I copied your widgets and moved them to x=0. The front bar size then gets set correctly (but I didn’t change the drag limits so they don’t work right.) I copied them again and placed them at x=100 --guess what? The front bar gets sized 100 px too much.

The solution is to track the location of the drag widget, as you have done, but then subtract the x-location of the front bar (or background bar, as they are both the same.) This calculates the position of the drag widget relative to the position of widget you are resizing, which is what you want here. If you also use variables for the drag limits, you can reuse your code easier–the whole thing can be re-positioned, resized, copied & pasted, and still work.

Hi mbc66,

Thank you so much for the solution and it is perfect for the on drag progress bar!

But now I have a further question shown as the attachment.

I’m trying make a size setting bar. As I move the drag widget, I would like to set text on value, the text area, equal to [[Math.floor(front.width/back.width*1550)+50]]. The maximum sum is supposed to be 1600, yet the result turns out to be 1581.

I guess the problem will be the width of the front bar I use in this equation. But I have no idea how to settle this.

Could you please kindly check for me?

Thank you so much :slight_smile:

Progress Bar on Drag Problem.rp (56.7 KB)

Here is an updated version.

Progress Bar on Drag Problem 3.rp (109.1 KB)

Your math works out, but the drag boundaries are not letting the front bar size to the same width as the background bar. This is because the width of the front bar is essentially set to the left edge of the drag widget, but the drag widget stops when its right edge gets to the right edge of the background bar. To troubleshoot and demonstrate this, I just copied your Home page and moved the drag widget below the bars --see Home (1).

To fix this, I just let the drag widget go past the background bar, up to the width of the drag widget. Thus, the foreground bar can reach its maximum width. See Home (2) for this demonstration and Home (3) for the solution. Also, note you don’t need the OnDragDrop event for this to work correctly.

One little drawback is this leaves a tiny gap when the drag widget is pulled all the way to the right. If that’s an issue, you could just put a copy of the background bar (in the background) and slide it right a few px to make it look better.

Hi my friend,

Can’t wait to share with you about my adaptation!

Progress Bar on Drag Problem solution.rp (56.1 KB)

I was enlightened by your explanation of the drag widget, so I modified the equation to calculate its size using its right instead of its x to be the minuend and added a new subtrahend, half of drag widget’s width. Then the result turns out to be correct!

Yet there is still a weird detail. As I demonstrate the RP, the result would be a little bit greater than 1600 if I drag the drag widget rightward really hard. But when I drop the drag widget gently, the result is normal.

However, there is no longer an obvious error popping out during the demonstration.

Thank you very much for the inspiration and wish you all the best Y ^-^ Y

Nice work!

I couldn’t get the value to go greater than 1600… But, this is where an OnDragDrop event could actually help. You could test the text of your value widget, and if less than 50, set it to “50” if greater than 1600, set it to “1600” to really force these limits.

Indeed! I’ll try :slight_smile: