Creating a Custom Slider | Proto.io Prototyping Tool
Learn how to create a custom slider in Proto.io in this short tutorial video.
Sliders are a great way to add interaction to your app. In this tutorial, we’ll be creating a custom slider built on a scale of 1-100.
Step 1. Adding our Elements
Within your project, add a text box and slider to your canvas. Adjust the properties of each. For example, we’ll enlarge the text, center it, and change its colour to white. The text box will act as the “number” that changes depending on the position of the slider.
Step 2: Creating An Interaction
Click on the slider, select” Interaction” and then “add an Interaction”.
Step 3: Defining the Interaction.
For trigger, select “Slider Drag” underneath “form”. For Action, select “ Set variable” under “Logic”. Under Variable name, we’ll create a new variable labelled “slider_position”.Then, select “Numeric” for Variable Type, and “Callback value from event” for value Type. For Callback Value, select Value %.
Let’s recap:
When the slider is dragged - the trigger - a new variable will be created - the action. This variable will be a number, and it will be based on the slider’s position on the scale (%), which ranges from 1-100.
Step 4. Creating a Callback
Create a Callback by selecting the “Callback” option. Under Action, select “Change Property”. For Screen, select your current screen. For Item, select the sample text that we previously created. For Property, select Text.
For Value Type, select read from variable. For Variable Name, select the variable that we previously created “ slider_position”.
Here’s what we’ve done:
We’ve created a second action - Callback - that automatically begins after the first is complete. This action uses the variable we created - read from variable and variable name - to change the property of the text to a numeric value based on the the sliders position.
Step 5. Save the Interaction, Save the Project, and Let’s preview.
And there you have it. As the slider changes position, the text changes to reflect the position of the slider from a scale of 1-100.
Website: https://www.discoverbusiness.us
Google +: https://plus.google.com/+Discoverbusi...
Facebook: / discoverbusiness
Twitter: / discoverbusines
Pinterest: / discoverbusines
