Change Fill on Slide

I am trying to create a slide button that has one action when slide to the right and another when it slide to left. I have the button slide working however on the slide I want to change the fill color of an ellipse to indicate the action performed. It seems like the interaction styles are the only thing that have the option to change fill but none of those actions are what I am doing. Any suggestions?

You could use an Interaction Style, e.g. Selected, for the right action and the normal style for the left. The other way would be to create a Dynamic Panel with two versions of the button (one per State) and toggle between the states as required. Or a show/hide of the two separate buttons.

A wider question though would be around the usability of what you’re trying to create - are you referring to a ‘carousel’ aka slider? They’re a bit like dropdowns - a very common UI element but one that should still be avoided:

Here are some resources. As ever, best to test your prototype with users:

No I am not trying to do a carousel. Think more like how in Gmail you can slide to right for delete and slide to the left to reply - or whatever the options are. This is a simple and intuitive gesture to use in a smart phone app so I am trying to duplicate this action in Axure. As I mentioned I got the area to slide left to right but base on that action I want to change the fill of an ellipse to indicate to the user the action they made. It seemed like a waste to me that I would duplicate the button when all that is changing is the color of an ellipse. The fill option is not available under the Events but it is available as a MouseDown option. Just thought I was missing something.

Yeah it’s annoying that fill option isn’t an available action in the Interaction Builder.

Right, I see what you’re doing - good stuff!

A couple of options spring to mind.

Place two widgets (e.g. hotspot) either side of the area that will be swiped left and right. For the OnDrag interaction, build a condition for when the swipeable widget is over one or the other widgets. Then use that to drive the change of the ellipse (you’ll have the either set a selected state for it, show/hide the different ones, or use a Dynamic Panel).

The other options is to use variables, but I can’t think of the maths right now. Basically you have a global variable for current x position of the swipeable widget. OnDrag you update this variable, possibly with a small Wait. If it’s less than it was, you know it’s being swiped left, if it’s greater than it was, you know it’s being swiped right, and you can change the ellipse as required.

Hope this helps. I’m fairly sure this kind of thing must have been done on the forums before, could you not find anything?

But in terms of your main request to change the fill, this is not an action available in the interaction builder, so your three options are:
-drive an Interaction State change (e.g. set it to Selected)
-use Show/Hide for two different widgets
-toggle states of a Dynamic Panel.

Using some of your suggestion I came up with an alternate option. I duplicate the ellipses and made them the colors I need. Then in my slide action I bring the color that I need to front. Because all of the ellipses are stacked the other colors get hidden.

Thanks for the help.