How to set the background color of my slider as long as I drag it?

newbie-question
#1

Hello everyone,

I’m trying to figure out this problem: I would like to set dynamically the background color of my slider (a classic slider) such as on IOS or Android.

If someone could help me it would be great !

Thanks you !

#2

The easiest way is to not dynamically set the color. Instead use a second widget that hides the background and moves with the slider control to reveal the background color.

#3

Thank you nkrisc, that’s simple and smart.

#4

Hi,

I have taken into account your advice but now that I have my two widget, the widget which hides the color one moves weirdely… Do you have any idea of how it could be fixed ? please find my RP file attached.

Thank you very much.
slider_essai1.rp (68.2 KB)

#5

Hi everyone,

For those following at home, maxiaw_ wrote into the support desk to ask about this. We discussed using two widgets, one for the background color of the slider and one for the foreground, along with Axure RP 8’s ability to set the size of any widget. With this new feature, you can use a draggable dynamic panel to set the size of a widget representing the foreground color so that it looks like the space to the left of the draggable control (or to the bottom, or however your slider is configured) is filling up with color. I’ve put together a quick example of how this might work in the attached file; please take a look!

Hope that helps!
Slider.rp (51.8 KB)

Different Types of Slider
#6

Hi Jonathan and everyone
i am working on a dual functionality of a slider where we can control the slider by sliding by cursor as explained above.

But want to add one more functionality to control the slider action by using a ADD or MINUS and still the slider can be controlled using the cursor.

Can you please guide,

thanks
Baskar

#7

Hi Poo!

Yep, you can do this with a simple “Move to” action to move the Button DP to [[Target.x + 10]] for the Plus button, and [[Target.x - 10]] for the minus button. Just be sure to keep the same left and right boundaries as the Button’s OnDrag event.

Hope this helps!

SliderwithButtons.rp (61.0 KB)