How to design an advanced price slider in your interactive prototypes
Create and simulate an advanced slider with interactive pricing in your prototypes with the help of this tutorial.
In the previous tutorial, you learned how to create a custom slider. In this tutorial, we will create a slider that will display rising numbers as an icon is moved along the horizontal slider bar. The advanced slider consists of a custom slider bar, a custom slider icon that moves horizontally across the bar, and an expression to change the numbers displayed according to the position of the icon.
You can download the below example here.
Creating an advanced price slider in your prototype
- Create a new web prototype.
- Drag a dynamic panel from the Widgets Library onto the canvas and format it to be the same size and shape as the example (523 x 23). Note: the size of the dynamic panel must match the example for the simulation to function correctly!
- Double click on the dynamic panel to edit its contents.
- Drag a rectangle widget onto the canvas and place it inside the dynamic panel. Rename the rectangle ‘slider bar‘ in the Properties outline.
- Set its width and color according to your preferences, but make sure the width matches that of the dynamic panel. This element will act as the custom slider bar.
- The second element should be a widget that will act as the custom slider icon, the ‘thumb‘. To replicate our example, drag an ellipse onto the canvas, resize it and place it on top of the slider bar. Rename this component ‘thumb’ in the properties panel. Note: if the image widget is not positioned infront of the other elements in the dynamic panel, use the Outline panel to move it forward.
- Add 2 text widgets to the right hand side of your slider, outside of the dynamic panel, and place them side by side. Write ‘1000’ inside the one on the far right, and ‘$’ in the other, on the left of it. Add another 2 text widgets side by side on the left of the slider, this time with ‘$’ in the far left and ‘0’ in the other, on the right of it.
- Rename the text widgets with the numbers ‘left_num’ and ‘right_num’ respectively.
- Add an image widget above your slider and your desired upload an image or logo. You can add also add text below the image, as in the example.
Adding interaction to your prototype to allow the icon to slide left and right
Now that all the elements have all been placed in the canvas and correctly positioned, it’s time to add interaction to your prototype. The event that will control the custom slider icon movement will be an “On Drag” + “Move”.
Follow these steps to create the event:
- Click on the slider ‘thumb’ icon and select ‘Add event‘. Add an On drag‘ + ‘Move‘ event, selecting the ‘thumb’ layer in the Outline. Set the left movement to ‘With cursor‘ to allow the icon to move horizontally. Set the top movement to ‘Current‘ so the slider icon vertical position remains fixed when dragging the custom slider icon.
- Make sure the box reading ‘Constrain with parent container’ is checked. Click OK.
- In the events bar, right click on the event that you have just created select ‘Add action after selected’. Here, create an ‘On drag‘ + ‘Insert into‘ action, selecting the ‘thumb’ as the component you want to insert into another and the dynamic panel as the component you want to insert the ‘thumb’ into. Click OK.
- Make sure the icon between these two events is set to ‘WITH previous’.
Adding an expression to make the pricing interactive
Once you’ve added the interactions to make the slider move on command, it’s time to add the expression. The event that will control the custom slider icon movement will be an ‘On Drag‘ + ‘Set value‘.
Follow these steps to create the event:
- Right click on the action that you’ve just created and select the option ‘Add action after selected’. Create an ‘On drag’ >‘Set value’ action, selecting the ‘thumb’ from the Outline panel.
- Click the radio button ‘calculated’ and then create the following expression:
Follow these steps to create the expression:
- Drag ‘thumb’ up into the expression builder, then follow it with a division function.
- From the dropdown below ‘thumb’ select PosX relative.
- Drag ‘sliderbar’ onto the expression builder, and follow it with ‘thumb’ again.
- Set the dropdown beneath both of these to say ‘width’.
- Place a Minus function between these two.
- Add a Multiplication function and a Text constant. In the Text constant write ‘1000’.
- Finally, place a ‘Round’ function at the very start of the expression.
- Finish with a final ‘Text’ constant, and write the value to 0. Click OK.
Make sure that the icon between the final 2 events is set to ‘AFTER previous’.
Now you can click ‘Simulate’ and interact with the new custom slider in your interactive wireframe!