Package | flexlib.baseClasses |
Class | public class SliderBase |
Inheritance | SliderBase ![]() |
Subclasses | ExtendedSlider |
The only modifications made to this class were to change some properties and methods from private to protected so we can override them in a subclass.
The Slider class is the base class for the Flex slider controls. The slider controls let users select a value by moving a slider thumb between the end points of the slider track. The current value of the slider is determined by the relative location of the thumb between the end points of the slider, corresponding to the slider's minimum and maximum values. The Slider class is subclassed by HSlider and VSlider. MXML SyntaxThe Slider class cannot be used as an MXML tag. Use the <mx:HSlider>
and <mx:VSlider>
tags instead. However, the Slider class does define tag
attributes used by the <mx:HSlider>
and <mx:VSlider>
tags.
The Slider class inherits all of the tag attributes of its superclass, and adds the following tag attributes:
<mx:tagname Properties allowThumbOverlap="false|true" allowTrackClick="true|false" dataTipFormatFunction="undefined" direction="horizontal|vertical" labels="undefined" liveDragging="false|true" maximum="10" minimum="0" showDataTip="true|false" sliderDataTipClass="sliderDataTip" sliderThumbClass="SliderThumb" snapInterval="0" thumbCount="1" tickInterval="0" tickValues="undefined" value="The value of the minimum property." Styles borderColor="0x919999" dataTipOffset="16" dataTipPrecision="2" dataTipStyleName="undefined" fillAlphas="[0.6, 0.4, 0.75, 0.65]" fillColors="[0xFFFFFF, 0xCCCCCC, 0xFFFFFF, 0xEEEEEE;]" labelOffset="-10" labelStyleName="undefined" showTrackHighlight="false" slideDuration="300" slideEasingFunction="undefined" thumbDisabledSkin="SliderThumbSkin" thumbDownSkin="SliderThumbSkin" thumbOffset="0" thumbOverSkin="SliderThumbSkin" thumbUpSkin="SliderThumbSkin" tickColor="0x6F7777" tickLength="3" tickOffset="-6" tickThickness="1" trackColors="[ 0xEEEEEE, 0xFFFFFF ]" tracHighlightSkin="SliderHighlightSkin" trackMargin="undefined" trackSkin="SliderTrackSkin" Events change="No default" thumbDrag="No default" thumbPress="No default" thumbRelease="No default" />
Property | Defined by | ||
---|---|---|---|
allowThumbOverlap : Boolean = false
If set to
false , then each thumb can only be moved to the edge of
the adjacent thumb. | SliderBase | ||
allowTrackClick : Boolean = true
Specifies whether clicking on the track will move the slider thumb.
| SliderBase | ||
dataTipFormatFunction : Function
Callback function that formats the data tip text.
| SliderBase | ||
direction : String
The orientation of the slider control.
| SliderBase | ||
labels : Array
An array of strings used for the slider labels.
| SliderBase | ||
liveDragging : Boolean = false
Specifies whether live dragging is enabled for the slider.
| SliderBase | ||
maximum : Number
The maximum allowed value on the slider.
| SliderBase | ||
minimum : Number
The minimum allowed value on the slider control.
| SliderBase | ||
showDataTip : Boolean = true
If set to
true , show a data tip during user interaction
containing the current value of the slider. | SliderBase | ||
sliderDataTipClass : Class
A reference to the class to use for the data tip.
| SliderBase | ||
sliderThumbClass : Class
A reference to the class to use for each thumb.
| SliderBase | ||
snapInterval : Number
Specifies the increment value of the slider thumb
as the user moves the thumb.
| SliderBase | ||
thumbCount : int
The number of thumbs allowed on the slider.
| SliderBase | ||
tickInterval : Number
The spacing of the tick marks relative to the
maximum value
of the control. | SliderBase | ||
tickValues : Array
The positions of the tick marks on the slider.
| SliderBase | ||
value : Number
Contains the position of the thumb, and is a number between the
minimum and maximum properties. | SliderBase | ||
values : Array
An array of values for each thumb when
thumbCount
is greater than 1. | SliderBase |
Method | Defined by | ||
---|---|---|---|
Constructor.
| SliderBase | ||
getThumbAt(index:int):SliderThumb
Returns the thumb object at the given index.
| SliderBase | ||
setThumbValueAt(index:int, value:Number):void
This method sets the value of a slider thumb, and updates the display.
| SliderBase |
Method | Defined by | ||
---|---|---|---|
measure():void
Calculates the amount of space that the component takes up.
| SliderBase | ||
updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
Positions the elements of the control.
| SliderBase |
Event | Summary | Defined by | ||
---|---|---|---|---|
Dispatched when the slider changes value due to mouse or keyboard interaction. | SliderBase | |||
Dispatched when the slider's thumb is pressed and then moved by the mouse. | SliderBase | |||
Dispatched when the slider's thumb is pressed, meaning the user presses the mouse button over the thumb. | SliderBase | |||
Dispatched when the slider's thumb is released,
meaning the user releases the mouse button after
a thumbPress event. | SliderBase |
allowThumbOverlap | property |
public var allowThumbOverlap:Boolean = false
If set to false
, then each thumb can only be moved to the edge of
the adjacent thumb.
If true
, then each thumb can be moved to any position on the track.
The default value is false
.
allowTrackClick | property |
public var allowTrackClick:Boolean = true
Specifies whether clicking on the track will move the slider thumb.
The default value is true
.
dataTipFormatFunction | property |
dataTipFormatFunction:Function
[read-write]Callback function that formats the data tip text. The function takes a single Number as an argument and returns a formatted String.
The function has the following signature:
funcName(value:Number):String
The following example prefixes the data tip text with a dollar sign and
formats the text using the dataTipPrecision
of a Slider Control named 'slide':
import mx.formatters.NumberBase; function myDataTipFormatter(value:Number):String { var dataFormatter:NumberBase = new NumberBase(".", ",", ".", ""); return "$ " + dataFormatter.formatPrecision(String(value), slide.getStyle("dataTipPrecision")); }
The default value is undefined
.
public function get dataTipFormatFunction():Function
public function set dataTipFormatFunction(value:Function):void
direction | property |
direction:String
[read-write]
The orientation of the slider control.
Valid values in MXML are "horizontal"
or "vertical"
.
In ActionScript, you use the following constants
to set this property:
SliderDirection.VERTICAL
and
SliderDirection.HORIZONTAL
.
The default value is SliderDirection.HORIZONTAL
.
public function get direction():String
public function set direction(value:String):void
See also
labels | property |
labels:Array
[read-write]An array of strings used for the slider labels. Flex positions the labels at the beginning of the track, and spaces them evenly between the beginning of the track and the end of the track.
For example, if the array contains three items, the first item is placed at the beginning of the track, the second item in the middle, and the last item at the end of the track.
If only one label is specified, it is placed at the beginning of the track. By default, labels are placed above the tick marks (if present) or above the track. To align the labels with the tick marks, make sure that the number of tick marks is equal to the number of labels.
The default value is undefined
.
public function get labels():Array
public function set labels(value:Array):void
liveDragging | property |
public var liveDragging:Boolean = false
Specifies whether live dragging is enabled for the slider.
If false
, Flex sets the value
and
values
properties and dispatches the change
event when the user stops dragging the slider thumb.
If true
, Flex sets the value
and
values
properties and dispatches the change
event continuously as the user moves the thumb.
The default value is false
.
maximum | property |
maximum:Number
[read-write]The maximum allowed value on the slider.
The default value is 10
.
public function get maximum():Number
public function set maximum(value:Number):void
minimum | property |
minimum:Number
[read-write]The minimum allowed value on the slider control.
The default value is 0
.
public function get minimum():Number
public function set minimum(value:Number):void
showDataTip | property |
public var showDataTip:Boolean = true
If set to true
, show a data tip during user interaction
containing the current value of the slider.
The default value is true
.
sliderDataTipClass | property |
sliderDataTipClass:Class
[read-write]A reference to the class to use for the data tip.
The default value is SliderDataTip
.
public function get sliderDataTipClass():Class
public function set sliderDataTipClass(value:Class):void
sliderThumbClass | property |
sliderThumbClass:Class
[read-write]A reference to the class to use for each thumb.
The default value is SliderThumb
.
public function get sliderThumbClass():Class
public function set sliderThumbClass(value:Class):void
snapInterval | property |
snapInterval:Number
[read-write]
Specifies the increment value of the slider thumb
as the user moves the thumb.
For example, if snapInterval
is 2,
the minimum
value is 0,
and the maximum
value is 10,
the thumb snaps to the values 0, 2, 4, 6, 8, and 10
as the user move the thumb.
A value of 0, means that the slider moves continuously
between the minimum
and maximum
values.
The default value is 0
.
public function get snapInterval():Number
public function set snapInterval(value:Number):void
thumbCount | property |
thumbCount:int
[read-write]
The number of thumbs allowed on the slider.
Possible values are 1 or 2.
If set to 1, then the value
property contains
the current value of the slider.
If set to 2, then the values
property contains
an array of values representing the value for each thumb.
The default value is 1
.
public function get thumbCount():int
public function set thumbCount(value:int):void
tickInterval | property |
tickInterval:Number
[read-write]
The spacing of the tick marks relative to the maximum
value
of the control.
Flex displays tick marks whenever you set the tickInterval
property to a nonzero value.
For example, if tickInterval
is 1 and
maximum
is 10, then a tick mark is placed at each
1/10th interval along the slider.
A value of 0 shows no tick marks. If the tickValues
property
is set to a non-empty Array, then this property is ignored.
The default value is 0
.
public function get tickInterval():Number
public function set tickInterval(value:Number):void
tickValues | property |
tickValues:Array
[read-write]
The positions of the tick marks on the slider. The positions correspond
to the values on the slider and should be between
the minimum
and maximum
values.
For example, if the tickValues
property
is [0, 2.5, 7.5, 10] and maximum
is 10, then a tick mark is placed
in the following positions along the slider: the beginning of the slider,
1/4 of the way in from the left,
3/4 of the way in from the left, and at the end of the slider.
If this property is set to a non-empty Array, then the tickInterval
property
is ignored.
The default value is undefined
.
public function get tickValues():Array
public function set tickValues(value:Array):void
value | property |
value:Number
[read-write]
Contains the position of the thumb, and is a number between the
minimum
and maximum
properties.
Use the value
property when thumbCount
is 1.
When thumbCount
is greater than 1, use the
values
property instead.
The default value is equal to the minimum property.
This property can be used as the source for data binding.
Implementation public function get value():Number
public function set value(value:Number):void
values | property |
values:Array
[read-write]
An array of values for each thumb when thumbCount
is greater than 1.
This property can be used as the source for data binding.
Implementation public function get values():Array
public function set values(value:Array):void
SliderBase | () | constructor |
public function SliderBase()
Constructor.
getThumbAt | () | method |
public function getThumbAt(index:int):SliderThumb
Returns the thumb object at the given index. Use this method to style and customize individual thumbs in a slider control.
Parametersindex:int — The zero-based index number of the thumb.
|
SliderThumb — A reference to the SliderThumb object.
|
measure | () | method |
protected override function measure():void
Calculates the amount of space that the component takes up. A horizontal slider control calculates its height by examining the position of its labels, tick marks, and thumbs relative to the track. The height of the control is equivalent to the position of the bottom of the lowest element subtracted from the position of the top of the highest element. The width of a horizontal slider control defaults to 250 pixels. For a vertical slider control, the width and the length measurements are reversed.
setThumbValueAt | () | method |
public function setThumbValueAt(index:int, value:Number):void
This method sets the value of a slider thumb, and updates the display.
Parametersindex:int — The zero-based index number of the thumb to set
the value of, where a value of 0 corresponds to the first thumb.
|
|
value:Number — The value to set the thumb to
|
updateDisplayList | () | method |
protected override function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
Positions the elements of the control.
The track, thumbs, labels, and tick marks are all positioned
and sized by this method.
The track is sized based on the length of the labels and on the track margin.
If you specify a trackMargin
, then the size of the track
is equal to the available width minus the trackMargin
times 2.
Tick marks are spaced at even intervals along the track starting from the beginning of the track. An additional tick mark is placed
at the end of the track if one doesn't already exist (if the tick interval isn't a multiple of the maximum value). The tick mark
y-position is based on the tickOffset
. An offset of 0 places the bottom of the tick at the top of the track. Negative offsets
move the ticks upwards while positive offsets move them downward through the track.
Labels are positioned at even intervals along the track. The labels are always horizontally centered above their
interval position unless the trackMargin
setting is too small. If you specify a trackMargin
, then the first and last labels will
position themselves at the left and right borders of the control. Labels will not crop or resize themselves if they overlap,
so be sure to allow enough space for them to fit on the track. The y-position is based on the labelOffset
property. An offset of 0
places the bottom of the label at the top of the track. Unlike tick marks, the labels can not be positioned to overlap the track.
If the offset is a positive number, then the top of the label will be positioned below the bottom of the track.
The thumbs are positioned to overlap the track. Their x-position is determined by their value. The y-position is
controlled by the thumbOffset
property. An offset of 0 places the center of the thumb at the center of the track. A negative
offset moves the thumbs upwards while a positive offset moves the thumbs downwards.
The placement of the tick marks, labels and thumbs are all independent from each other. They will not attempt to reposition themselves if they overlap.
For a vertical slider control, the same rules apply. In the above description, substitute width for height, height for width, left for up or top, right for down or bottom, x-position for y-position, and y-position for x-position.
ParametersunscaledWidth:Number — Specifies the width of the component, in pixels,
in the component's coordinates, regardless of the value of the
scaleX property of the component.
|
|
unscaledHeight:Number — Specifies the height of the component, in pixels,
in the component's coordinates, regardless of the value of the
scaleY property of the component.
|
change | event |
mx.events.SliderEvent
Dispatched when the slider changes value due to mouse or keyboard interaction.
If the liveDragging
property is true
,
the event is dispatched continuously as the user moves the thumb.
If liveDragging
is false
,
the event is dispatched when the user releases the slider thumb.
thumbDrag | event |
mx.events.SliderEvent
Dispatched when the slider's thumb is pressed and then moved by the mouse.
This event is always preceded by a thumbPress
event.
thumbPress | event |
mx.events.SliderEvent
Dispatched when the slider's thumb is pressed, meaning the user presses the mouse button over the thumb.
thumbRelease | event |
mx.events.SliderEvent
Dispatched when the slider's thumb is released,
meaning the user releases the mouse button after
a thumbPress
event.