Anyone create something like this in Axure?
It’s a horizontal slider where the user drags the scale and the number to be selected stays in the middle.
I’m going to give it a try, but I know there are ninjas out there who can bang it out!
Thanks,
~ Meredith Sivick
This tutorial shows the basics.
https://docs.axure.com/tutorials/mobile-patterns/swiping-slideshow/
A while back, I created a variation of the RP8 version, which shows the panel contents–a list–sliding while dragging, and how this can be done with a repeater as well. The “indicator” is a text widget in front of the images panel, to show the image position, e.g., “3 of 5”.
Applying this to your example, I created a separate widget below the list and update its text as the list moves. For the visuals, I placed the blue “container” as a widget behind the “options” list, and made an arrowhead and gradients in front of it, with all that wrapped in an outer dynamic panel. That panel controls the interaction: its Dragged event moves the list (a group of the option widgets, “1st Option”, “2nd Option”, etc.); and its Drag Dropped event snaps the list to the center (using a hotspot widget in same place as the initial selected option.) Each “optionN” widget has a Moved event and if the arrowhead is over (in front) of it, it updates the “list position” by setting the text of the “carousel bg”–the blue background" to its position number ( I did this because that text is not visible, just need somewhere to keep track of the list position; I could have used a global variable for this purpose), and setting the text for the “optionChoice” widget.
Horizontal Carousel with indicator.rp (118.8 KB)
This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.