Adjusting the Range of a Custom Slider | Proto.io Prototyping Tool
Learn how to adjust the range of a custom slider in Proto.io in this tutorial video.
Sliders are a great way to add interaction to your app. In this tutorial, we’ll show you how to adjust the range of a custom slider.
Note: If you know basic Java math functions, this will be easier.
Step 1: Adding Elements
To begin, add a rectangle and oval to your canvas. DO NOT ADD A SLIDER from the UI panel! With a normal slider, the range is somewhat limited. It’s easier to adjust the range by creating our own slider.
Position these accordingly.
For this example, the rectangle will be 440 x 20. The oval will be 131 x 131, and we’ll click on “draggable” to enact drag. For drag axis, select horizontal. For bounds, select custom containment - then 35 for vertical, and 570 for horizontal.
For the text, leave it blank.
Step 2: Creating Variables
Click on settings, then “variables manager”
Click “Add variable”.
For name, type slider_position.
For type, select numeric.
For value, leave blank.
Finally, check evaluate.
Follow the same steps and create another variable labelled drag_handle.
Step 3: Adding an Interaction to the Oval
Click on the oval, then interactions. Select add interaction.
For trigger, select on drag. If this option doesn’t appear, the oval is not draggable. Re-do Step 1.
For action, select set variable.
For variable name, select slider_position.
For value type, select callback from value event.
For callback value, select x position.
Leave dealy.
Let’s recap:
The purpose of this interaction is to calculate the position of the slider handle.
When the oval is dragged - the trigger - a new variable - the action - is created. This new variable is slider_position, and it is based on the horizontal position of the oval - x position.
Step 4: Adding a Callback
Check the callback button to create a callback.
For action, select set variable.
For variable name, select drag_handle.
For value type, select custom value.
For new value, enter the following Java: parseInt( ((Math.max({slider_position}, 0))/(18.10))+1) . Without going into too much detail, this javascript is what creates the slider range, which in this example is from 1-25.
If you are familiar with java, then you can adjust this. If you are unfamiliar with java, you can read up on it or spend time adjusting this number until you arrive at your range. For example, changing this number to 23.10 changes the range from 1-20.
Let’s recap again:
The purpose of this callback is to set the variable - the action - of drag_handle - variable name. The variable is custom, and it based on the java script we entered.
Step 5: Adding a Second Callback
Add a second callback.
For action, select change property.
For screen, select your current screen.
For item, select the text we added earlier.
For property, select text.
For value type, select read from variable.
For variable name, select Drag_handle.
Leave delay.
One last recap:
The purpose of this second callback is to change the property - the action - of the text - the item - to a number, which is based on the variable we created earlier - drag_handle.
Step 6: Save the interaction. Save the project. Let’s preview.
There we have it. The slider drags from 1-25. All the interactions, and callbacks are working properly.
Website: https://www.discoverbusiness.us
Google +: https://plus.google.com/+Discoverbusi...
Facebook: / discoverbusiness
Twitter: / discoverbusines
Pinterest: / discoverbusines
gala ventura
alexis piperides
at ha
protonerds
Watch video Adjusting the Range of a Custom Slider | Proto.io Prototyping Tool online without registration, duration hours minute second in high quality. This video was added by user Discover Business Degrees 21 September 2015, don't forget to share it with your friends and acquaintances, it has been viewed on our site 4,441 once and liked it 42 people.