Sorry, the InVision Help Center does not support Internet Explorer. Please download Microsoft Edge or another modern browser.


InVision ambassador ambassador
Ian Tripp Edited

How To Create Tracking Bar With Increasing Numbers

how do i create a tracking bar like this but with an actually detailed description on how to make the numbers increase as you slide up the bar 

This post is associated with a known feature request: [[problemTicketSubject]]. Let our Product team know that you’re interested in this feature.

Sign in to add your vote

Thanks for taking the time to share your feedback about making our product better. We’ve let our Product team know that you’re interested in this feature so they can factor that into their product strategy.

comments

sort by


FAHANMI Ambrose Wuraoluwa
InVision ambassador FAHANMI Ambrose Wuraoluwa , ambassador
Comment actions Permalink

Hi Ian,

To make an interactive slider,

  • First create the element that would serve as the sliding path for your tracking bar.
    (Traditionally a rectangle with rounded corners).
  • Give the rectangle any colour of your choice.
    (This would primarily be the colour of the rectangle when the tracking bar is at its minimum).
  • Duplicate this element (rectangle) and change the colour. Let's call this progress bar for easy reference.
    (This would primarily be the colour of the rectangle when the tracking bar is increasing or at its maximum).
  • Reduce the width of the progress bar to denote minimum level of the tracking bar.
  • Create an ellipse that would serve as the anchor for changing the tracking bar. 
    (The element that you need to hold and drag to increase or reduce the tracker).
  • Create another rectangle on top of the ellipse and make the width cover the entire length of your tracking bar and the height cover the height of the track bar and the ellipse. Set opacity of this rectangle to 0%.
    (This would ensure that you have to drag from the beginning of the track bar to the end of the track bar to reach maximum value. Otherwise, while your prototype animates correctly, you would only need to drag halfway to reach maximum level).
  • Select and group the rectangle you just created and the ellipse.
    (This would ensure that dragging the ellipse makes the tracking bar animate desirably).
  • Create the placeholder that would display the levels as the tracking bar increases or decreases.
    (Could be a circle, or a location component or anything that works for you).
  • Type the levels you want using the text tool (same tool you use for typing). 0, 1, 2, 3, 4 ... or 1%, 10%, 20%... whatever your choice is. Ensure that each value is on a new paragraph. (Just hit 'enter' after typing a value). 
  • Put the text (would look like a long scroll by now) in the placeholder you created and make sure the value you want as the minimum value is placed in the center of the placeholder.
  • Create another rectangle that covers just this minimum value and reduce the opacity of the rectangle to zero.
  • Select the rectangle and the text of your values, right click and create mask.
    (By now, only the minimum value should be visible as creating mask only reveals the value within the rectangle you created and hides other values outside the rectangle).
  • Now duplicate the entire artboard.

On your new artboard,

  • Move the ellipse that serves as your slider to the end of your track bar. 
    (The level that would depict the maximum value. Remember the ellipse is in a group, be sure to move just the ellipse as the rectangle in the group covers the width of the track bar and serves just to animate properly).
  • Also increase the width of the progress bar (remember progress bar?) such that it covers the entire track bar.
    (Depicting maximum level reached. By now it would have completed covered the rectangle representing minimum value and you have full progress value only).
  • Now move the text values till it reveals the text depicting maximum value. 
  • Move the placeholder and the group of text values and rectangle to the end of the track bar.

Finally,

  • Select the group that contains your slider and the rectangle that covers the entire track bar (very important to select the group and not just the slider) on the first artboard and create an interaction to the next artboard.
    (Just hit c on your keyboard to create the interaction).
  • Choose 'drag right' as the trigger, Choose 'motion' for your transition and set your duration and delay as you wish.
  • Select the same group you did in the first artboard on the second artboard (group of slider and rectangle that covers the entire track bar) and create an interaction to the first artboard.
  • Choose 'drag left' as the trigger this time and keep other parameters the same as the first interaction.

Now, preview and your track bar should animate.

(Very important is to make sure all the elements/assets you created have unique names. You'll have a number of rectangles and circles, so it is imperative that each one has a different name before you duplicate your artboard. This would ensure smooth transition and auto-animation).

(Also, attached is a link to a studio file where I created this just as a guide).

0

Ian Tripp
InVision ambassador Ian Tripp , ambassador
Comment actions Permalink

Thank You! But while using the slider it wont stay in the same place because it moves by itself. How do i make it stay on a set number? 

0

FAHANMI Ambrose Wuraoluwa
InVision ambassador FAHANMI Ambrose Wuraoluwa , ambassador
Comment actions Permalink

Since it's a prototype, you would need to create instances for the set numbers you want.
Instead of the next artboard having the instance set to the maximum value, you can have an intermediary value or values.

0

Ian Tripp
InVision ambassador Ian Tripp , ambassador
Comment actions Permalink

How do i create separate instances ?

0

FAHANMI Ambrose Wuraoluwa
InVision ambassador FAHANMI Ambrose Wuraoluwa , ambassador
Comment actions Permalink

Let's say your range of values is between 1-10 and you want to create an instance for 5, just like the guide where you had two artboards. One artboard was for minimum value and the other was for maximum value.
You'll create an artboard in between the first and second artboard. This artboard would have the slider, placeholder+text and the progress bar moved to a point on the track bar that depicts 5.
Hence, your new interaction flow would be from:

  • Minimum; to
  • Any instance (could be more than one and in this case, 5); to
  • Maximum value.

All other ways of creating the slider (easy, duplicate artboards) and interactions remain the same. Only difference is moving the slider, placeholder+text and progress bar to the point that represents the instance you want to create before moving to maximum value.

0

Ian Tripp
InVision ambassador Ian Tripp , ambassador
Comment actions Permalink

Thank you so much for your help! But when dragging the slider it moves very slowly and you must drag it with a lot of force. If you wouldn't mind could you make me a number slider that is actually easy to move. That would be very helpful so i can see the steps involved for myself

0

FAHANMI Ambrose Wuraoluwa
InVision ambassador FAHANMI Ambrose Wuraoluwa , ambassador
Comment actions Permalink

Alright, I'll come up with it and share shortly.
And for the drag, the common culprit would be your transition duration. Sometimes the longer the duration, the higher the drag.

0

join the conversation

to comment, sign up or sign in.