How to create an interactive Linear Gauge a.k.a a Slider control

We’ve been ask several times “How can I create a Slider in Intuiface?”. Yes, having such a control as a native asset in Composer is in our roadmap, but not on the short term, especially since there are ways to build such a control with the existing assets & collections.

Below is a short video explaining how to create a simple interactive linear gauge using a Linear Gauge, a Scroll Collection and a transparent Rectangle Shape.

Video

Download sample here

Interactive_Linear_Gauge_and_Slider.zip (6.3 MB)

Key elements to remember

Always align the rectangle shape to the top of the Scroll Collection.

If you don’t have a handle, the “formulas” are

  • Linear Gauge height = Scroll Collection height
  • Rectangle height = Scroll Collection height x 2

If you wish to create a slider with a handle, such as the 3rd in the sample above, the formula changes like this

  • Rectangle height = (Scroll Collection height x 2) - Handle height
4 Likes