How to create a price slider with interactive elements in your web wireframes
Create and simulate a price slider with interactive elements and adjustable pricing in your prototypes with the help of this tutorial.
In the previous tutorial, you learned how to create an advanced interactive price slider. In this tutorial, we will create a price slider that will display rising numbers as an icon is moved along the horizontal slider bar and show different images depending on the numeric value displayed. The advanced slider consists of a custom slider bar, a custom slider icon that moves horizontally across the bar, and the images that will be shown in the price different intervals.
You can download the below example here.
Creating a price slider with interactive and adjustable pricing
1. Create a new web prototype. Select the Screen from the outline tab, resize it to 800 x 400 px and customize it as desired in the Properties tab. In our example, we have changed the background color to gray.
2. Drag a rectangle widget to the canvas and center it on the screen and resize it to 611 x 246 px.
3. Next, add an ellipse widget and draw a horizontal line on the canvas and place them at the bottom-center of the rectangle, to match our example. Resize the ellipse (which will be the price slider thumb) to 23 x 23 px and the width of the line (which will be the Sliderbar) to 523 px. These elements make up the price slider. Customize them as desired and group them in a dynamic panel, (select both, right click and then select the “Group in dynamic panels” option).
4. Now, draw a vertical line on the canvas. This will represent a price interval in the price slider. Resize the width to 25 px and copy and paste the line 3 times. Place each line along the price slider, each with equal distance from the others. Group them together, (select all 4 lines, right click and then select the “Group” option).
5. Add 2 text widgets to the left-hand side of your slider, outside of the dynamic panel, and place them side by side. Write ‘0’ inside the one on the right, and ‘$’ in the other, on the left of it. Add another 2 text widgets side by side on the right of the slider, this time write ‘1000’ inside the one on the right and ‘$’ in the left.
6. Rename the ID of the text widgets containing the number values ‘left_num’ and ‘right_num’ respectively.
6. Finally, give your prototype a header using a text widget and add 4 images to the canvas (image_1, image_2, image_3, image_4). Going from left to right, place them at the top of the rectangle, one above each line widget. Each one should represent a stage in the price cycle. In our example, we have used different types of accommodation. Mark images image_2, image_3, image_4 as hidden.
Adding events to make your slider interactive
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” series:
- Click on the slider ‘thumb’ icon and select ‘Add event‘. Add an On drag‘ + ‘Move‘ event, selecting the thumb from the Outline tab. 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.
- Right click on this event to add another: choose the “Add action after selected” option. Add an “On Drag” + “Insert Into” event, selecting the thumb from the Outline tab as the component you want to insert into another. In the dialog that appears below, select Panel from within the Dynamic Panel from the Outline tab as the component you want to insert it into. Click OK. Change the link in between these two events to “WITH previous”.
- Again, right click on the event you have just created to add another. Add an “On Drag” + “Set Value” event, selecting the”left_num” text box. Below, set the value as calculated and add the following expression:
Drag the ROUND function to the first position in the expression builder. Drag the thumb to the second position (change the value in the drop down to PosX relative), followed by the DIVISION function. Next drag Panel 1 (change the value to Width), followed by MINUS function, and then the thumb (change the value to Width). Next drag the MULTIPLY function and type the number ‘1000’ into the next position. In the final position, type the number ‘0’ and click OK twice.
This expression will ensure that the price slider can move across the slider bar and that the corresponding value will change as necessary.
Now we will add events to ensure that the images change depending on where the price slider thumb is positioned.
- Add another event to the thumb by choosing the “Add Event” option. Add an “On Drag” + “Show” event, selecting the image furthest on the left on the screen (image_1). Click OK.
- On the left of this event, select the “Add condition” option and add the following expression:
Drag the”left_num” text box to the first position in the expression builder, followed by the GREATER OR EQUALS TO function and type the number ‘0’ into the position that follows. Next, drag the AND function. Now, drag the”left_num” text box to the next position, followed by the LESS OR EQUALS TO function and type the number ‘300’ into the position that follows. Click OK.
This expression will ensure that as the price slider thumb moves between the values $0-$300, only the first image on the left will appear.
- On the right of this event, select the ‘Else’ option.
- Add an “On Drag” + “Hide” event, selecting the image furthest on the left on the screen. Click OK.
Repeat the “On Drag” + “Show/Hide” events and expression for the remaining images (image_2, image_3 & image_4. Remember to change the image you want to show/hide each time and the values in the expressions.
- For image_2: change the values in the expression to GREATER OR EQUALS TO 300, and LESS OR EQUALS TO to 630
- For image_3: change the values in the expression to GREATER OR EQUALS TO 630, and LESS OR EQUALS TO to 990
- For image_4: change the values in the expression to GREATER OR EQUALS TO 990, and LESS OR EQUALS TO to 1000
And that’s it! Click ‘Simulate‘ to view and interface with your prototype. Drag the thumb left and right across the slider bar to see the numbers increase and decrease in value and the images change depending on the value.