Linear Gauges

Overview

The HlinearGauge and VLinearGauge components are enhanced sliders with support for multiple thumbs, tick marks, labels, thumb labels, and more.

Creating the Linear Gauge Components

Both gauges extend the Flex SliderBase class which means that they can be added to any container that implements IVisualElementContainer.

Using the Linear Gauge Components

The horizontal (HLinearGauge) and the vertical (VLinearGauge) gauges operate identically except for the axis the thumbs slide along.

If the "useMultiThumb" property is false then the most relevant property is "value", which is the currently set, bindable, value. If the "useMultiThumb" property is true, then to get the min/max value of the range created by the multiple thumbs, use the "values" property. Also, use the "values" property to set the values for multiple thumbs.

Like other SliderBase components, use minimum and maximum to set the bounds of acceptable values.

Tick Marks

If "showTicks" is true, then major and minor ticks will be displayed. Major ticks are ticks that can display a label next to them and minor ticks are ticks displayed between the major ticks.

If "showTicks" is true, there are a minimum of 2 major ticks.

Tick Labels

Tick labels will by default display the numerical value of the major ticks they are next to. The precision of the number displayed is set via the "labelDefaultPrecision" property.

Use the "labelsFormatFunction" to display custom labels.

Set the "showTickLabels" property to false to not display the major tick labels.

MultiThumb

To display a second thumb, set the "useMultiThumb" property to true. The second thumb can be dragged just like the primary thumb and its value will be available via the "values" property.

To display labels for the current thumb values, set "showThumbLabels" to true.

Range Button

If a second thumb is displayed, a button can be displayed between the thumbs called the range button if the "showRange" property is true.

The range button is draggable and can update the "values".

Min/Max Range Spans

If a second thumb is displayed, the minimum and maximum value of the range created, in addition to the minimum/maximum of the bounds, can be created. In other words the difference between the max/min of the range can be set. E.G. If the thumbs had the following values (50, 100) the range span would be 50. Thus, if the "minimumRangeValue" was set to 50 the values could not be moved in any closer. Also, if the "maximumRangeValue" was 50, the thumbs could also not be moved apart.

Useful to constrain the size of the range span.

Layout

Measurement should accurately measure the size of the component based on whether ticks are displayed, labels, thumb labels, etc.

Animations & Effects

If the track is directly clicked, the thumb will animate to the new value. The duration of this animation can be set via the inherited "slideDuration" style.

If multiple thumbs are present on a track click, the closet thumb will animate to the new value.

Accessibility

Fields can be tabbed to and interacted with via the keyboard. If multiple thumbs are displayed, only the primary thumb can be altered via keyboard interaction.

Selected Custom Events

RANGE_DRAG_START
ardisia.components.gauges.events.GaugeEvent
Dispatched at the beginning of range button drag.

RANGE_DRAG_END
ardisia.components.gauges.events.GaugeEvent
Dispatched at the end of a range button drag.

RANGE_DRAGGING
ardisia.components.gauges.events.GaugeEvent
Dispatched during range button dragging.

VALUES_COMMIT
ardisia.components.gauges.events.GaugeEvent
Dispatched when the value(s) change.

Selected Custom Styles

See ASDocs for GaugeBase and LinearGaugeBase. Numerous custom styles.

Themes & Skinning

Skins for the Spark, London, and Stockholm themes are provided.

Example

See the Linear Gauges demo application for example code.

Back To Top