Designing a price slider

With Justinmind, you can create and simulate a price slider with interactive elements and adjustable pricing.

Animated price slider with interactive UI elements for your prototypes

To create your price slider with interactive elements and adjustable pricing, follow the steps below:

Designing your price slider in your prototype

  1. Create a new web prototype.
    • Select the Screen from the Outline palette, resize it to 800 x 400 px and customize it as desired in the Properties palette.
  2. Drag a Rectangle widget to the canvas, 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 (using the Line widget).
    • 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 (using the Line widget again).
    • This will represent a price interval in the price slider. Resize the width to 25 px and copy and paste the line three 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 two 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 two 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.
  7. Finally, give your prototype a header using a text widget and add four 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.
    • 1-web-wireframe-interactive-price-slider

Adding events to your price slider

Now that all the elements have all been placed in the canvas and correctly positioned, it’s time to add events to your prototype. The event that will control the custom slider icon movement will be an “On Drag” series:

2-web-wireframe-interactive-price-slider

  1. Select the slider ‘thumb’ icon and go to the Events palette.
    • Add an “On Drag” + “Move” event, selecting the thumb from the Outline palette.
    • 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.
  2. Make sure the box reading “Constrain with parent container” is checked. 
    • Click “OK”.
    • 3-web-wireframe-interactive-price-slider
  3. 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 palette 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 palette as the component you want to insert it into.
    • Click “OK”.
    • Change the link in between these two events to “WITH previous”
  4. 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 term in the conditional expression.
    • Drag the thumb to the second term (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 “Multiple” function and type the number “1000” into the next term.
    • In the final term, type the number “0” and click “OK” twice.
    • 4-web-wireframe-interactive-price-slider
    • This expression will ensure that the price slider can move across the slider bar and that the corresponding value will change as necessary.
  5. 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”.
  6. On the left of this event, select the “add condition” option and add the following conditional:
    • Drag the”left_num” text box to the first term in the conditional expression, followed by the “Greater or equals to” function and type the number “0” into the term that follows.
    • Next, drag the “And” function.
    • Now, drag the”left_num” text box to the next term, followed by the “Less or equals to” function and type the number “300” into the term 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.
    • 5-web-wireframe-interactive-price-slider
  7. 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”.
  8. 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 functions and values in the expression to “Greater or equals to” 300, and “Less or equals to” 630
    • For image_3: change the functions and values in the expression to “Greater or equals to” 630, and “Less or equals to” 990
    • For image_4: change the functions and values in the expression to “Greater or equals to” 990, and “Less or equals to” 1000

And that’s it! Click ‘Simulate’ to view and interact 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.

You can download our example here.