All Collections
Using Editor
Examples
Example: Utilizing Slider Widgets in iRise Editor
Example: Utilizing Slider Widgets in iRise Editor
Slider widget and viewstack examples
Kirsten Stevens avatar
Written by Kirsten Stevens
Updated over a week ago

You can utilize the Slider widget in iRise Editor to perform a variety of different activities like rating scales and size adjustments. 

In this article, I'll be showing you how to use a combination of the Slider widget, actions, and viewstacks to create a dynamic user experience where a frowning face is displayed when the Slider is set to 0 and a smiling face when set to 1.

First, let's add a Slider widget on the screen.  Click the Slider widget from the widget toolbar and draw a new Slider widget on the screen.

Update the slider settings in the Format > Settings tab.  Set the min and max values to 0 and 1 respectively.

Next, we need to create the images to accompany the slider. You can pick some of your favorite emoticons to use here.  I have saved smileface.jpg and frownface.jpg to my desktop.  Drag and drop smileface.jpg on to the canvas [image link here].

Right-click and select Add view > Duplicate view.  

Update the image in the second view to sad.jpg in the Format > Settings tab [image link here]

.

Add an action to the slider that will change the displayed view of the viewstack to the smiling face. Right-click the slider and click Add action. Set Trigger to Change and Action to Switch views then click next. 

Click the Select views button and then click the emoticon viewstack to set the target. Select Frown from the dropdown. 

Add another action in a new action sequence to show the smile. Set the trigger to change, the action to switch views, and the Add to dropdown to New action sequence. 

Add rules to the actions on the slider to differentiate between the frown and smile. The rule for Action Sequence 1 should be dependent on the Slider equaling 0, while the rule for Action Sequence 2 should depend on the Slider equaling 1.

The last thing to check is the default view you want to display on load of the page. Ensure that the smile view is set to the default view by clicking on view 1 in the viewstack. 

Now that the rules are in place, test to see if the slider switches the views between the smile and the frown. 

Did this answer your question?