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 the price slider

  1. Create a new web prototype. Drag a Rectangle widget to the Canvas, center it on the screen and resize it to 611 x 246 px. Next, add an Ellipse widget and a horizontal Line widget on the Canvas, placing 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.
  2. Customize them as desired and group them in a Dynamic Panel, (select both, right click and select “Group in Dynamic Panel”).
  3. Now, place a vertical Line widget on the Canvas. This will represent a price interval in the price slider. Resize the width to 25 px and duplicate the line three times. Place each line along the price slider, each with equal distance from the others.
  4. Group them together, (select all 4 lines, right click and select “Group”).
  5. Add two Text widgets to the left 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.
  6. 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. Rename the ID of the text widgets containing the number values “‘left_num” and “right_num” respectively.1-web-wireframe-interactive-price-slider
  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.
  8. Mark images image_2, image_3, image_4 as hidden in the Properties palette.

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 X movement to “With cursor” to allow the icon to move horizontally.

    Set the Y 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.On Drag Move event
  2. 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.On Drag Insert Into event
  3. 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. For the value, click the ‘Calculated’ radio button and the ‘Add expression’ text. You’ll see the Calculated Expression builder appear.
  5. In the builder, follow these steps to create the expression:
    4-web-wireframe-interactive-price-slider
    1. Drag the “Round” function to the open space in the expression.
    2. Drag the thumb (Ellipse) to the open space (change the value in the drop down to PosX relative).
    3. Drag the “Division” function next to the thumb in the expression.
    4. Drag Panel 1 (change the value to Width) to the next space.
    5. Drag the “Minus” function to the next space.
    6. Drag the thumb (Ellipse) to the open space (change the value to Width).
    7. Drag the “Multiply” function to the next open space.
    8. Type the number “1000” into the next space.
    9. In the final space, type in the number “0”.

    This expression will ensure that the price slider can move across the slider bar and that the corresponding value will change as necessary.
  6. 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) as the target to be shown.On Drag Show event
  7. Back in the Events palette, click “add condition”. You’ll see the Conditional Expression builder appear. Follow these steps to create the condition:
    5-web-wireframe-interactive-price-slider
    1. Drag the”left_num” text element to the open space.
    2. Drag the “Greater or equals to” function to the expression next.
    3. Type the number “0” into the open space that appears.
    4. Drag the “And” function to the expression next.
    5. Drag the”left_num” text element to the next open space.
    6. Drag the “Less or equals to” function into the expression.
    7. Finally, type the number “300” into the open space that appears.
    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.
  8. Back in the Events palette, click on the “Else” text. Create an “On Drag” + “Hide” event, selecting the image furthest on the left on the screen to be hidden. 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:
    1. For image_2: change the functions and values in the expression to “Greater or equals to” 300, and “Less or equals to” 630.
    2. For image_3: change the functions and values in the expression to “Greater or equals to” 630, and “Less or equals to” 990.
    3. For image_4: change the functions and values in the expression to “Greater or equals to” 990, and “Less or equals to” 1000.

    Here’s how your Events should look:
    All Events

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.