- Using the Library
- Using the Themes
- Using the Demo App
- Donut Chart
- Funnel Chart
- Linear Gauges
- Menu and MenuBar
- Radial Gauge
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.
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 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.
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.
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.
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.
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
Dispatched at the beginning of range button drag.
Dispatched at the end of a range button drag.
Dispatched during range button dragging.
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.
See the Linear Gauges demo application for example code.Back To Top