Packageflexlib.baseClasses
Classpublic class SliderBase
InheritanceSliderBase Inheritance mx.core.UIComponent
SubclassesExtendedSlider

SliderBase is a copy/paste version of the original Slider class in the Flex framework.

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 Syntaxexpanded Hide MXML Syntax

The 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"
  />
  


Public Properties
 PropertyDefined 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
Public Methods
 MethodDefined 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
Protected Methods
 MethodDefined 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
Events
 EventSummaryDefined 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
Styles
 StyleDescriptionDefined by
  
borderColor
Type: uint   Format: Color   CSS Inheritance: no
The color of the black section of the border. The default value is 0x919999.
SliderBase
  
dataTipOffset
Type: Number   Format: Length   CSS Inheritance: no
The offset, in pixels, of the data tip relative to the thumb. Used in combination with the dataTipPlacement style property of the HSlider and VSlider controls. The default value is 16.
SliderBase
  
dataTipPrecision
Type: int   CSS Inheritance: no
Number of decimal places to use for the data tip text. A value of 0 means to round all values to an integer. The default value is 2.
SliderBase
  
dataTipStyleName
Type: String   CSS Inheritance: no
The name of the style declaration to use for the data tip. The default value is undefined.
SliderBase
  
fillColors
Type: Array   Format: Color   CSS Inheritance: no
Colors used to tint the slider thumb. Pass the same color for both values for a "flat" looking control. The default value is [ 0xFFFFFF, 0xCCCCCC, 0xFFFFFF, 0xEEEEEE; ].
SliderBase
  
invertThumbDirection
Type: Boolean   CSS Inheritance: no
Invert the direction of the thumbs. If true, the thumbs will be flipped. The default value is false.
SliderBase
  
labelOffset
Type: Number   Format: Length   CSS Inheritance: no
The y-position offset (if direction is horizontal) or x-position offset (if direction is vertical) of the labels relative to the track. The default value is -10.
SliderBase
  
labelStyleName
Type: String   CSS Inheritance: no
The name of the style to use for the slider label. The default value is undefined.
SliderBase
  
showTrackHighlight
Type: Boolean   CSS Inheritance: no
Specifies whether to enable track highlighting between thumbs (or a single thumb and the beginning of the track). The default value is false.
SliderBase
  
slideDuration
Type: Number   Format: Time   CSS Inheritance: no
Duration in milliseconds for the sliding animation when you click on the track to move a thumb. The default value is 300.
SliderBase
  
slideEasingFunction
Type: Function   CSS Inheritance: no
Tweening function used by the sliding animation when you click on the track to move a thumb. The default value is undefined.
SliderBase
  
thumbDisabledSkin
Type: Class   CSS Inheritance: no
The skin for the slider thumb disabled state. The default value is SliderThumbSkin.
SliderBase
  
thumbDownSkin
Type: Class   CSS Inheritance: no
The skin for the slider thumb down state. The default value is SliderThumbSkin.
SliderBase
  
thumbOffset
Type: Number   Format: Length   CSS Inheritance: no
The y-position offset (if direction is horizontal) or x-position offset (if direction is vertical) of the thumb relative to the track. The default value is 0.
SliderBase
  
thumbOverSkin
Type: Class   CSS Inheritance: no
The skin for the slider thumb over state. The default value is SliderThumbSkin.
SliderBase
  
thumbUpSkin
Type: Class   CSS Inheritance: no
The skin for the slider thumb up state. The default value is SliderThumbSkin.
SliderBase
  
tickColor
Type: uint   Format: Color   CSS Inheritance: no
The color of the tick marks. Can be a hex color value or the string name of a known color. The default value is 0x6F7777..
SliderBase
  
tickLength
Type: Number   Format: Length   CSS Inheritance: no
The length in pixels of the tick marks. If direction is Direction.HORIZONTAL, then adjust the height of the tick marks. If direction is Direction.VERTICAL, then adjust the width. The default value is 3.
SliderBase
  
tickOffset
Type: Number   Format: Length   CSS Inheritance: no
The y-position offset (if direction is horizontal) or x-position offset (if direction is vertical) of the tick marks relative to the track. The default value is -6.
SliderBase
  
tickThickness
Type: Number   Format: Length   CSS Inheritance: no
The thickness in pixels of the tick marks. If direction is horizontal, then adjust the width of the tick marks. If direction is vertical, then adjust the height. The default value is 1.
SliderBase
  
trackColors
Type: Array   Format: Color   CSS Inheritance: no
The colors of the track, as an array of two colors. You can use the same color twice for a solid track color.

You use this property along with the fillAlphas property. Typically you set fillAlphas to [ 1.0, 1.0 ] when setting trackColors.

The default value is [ 0xE7E7E7, 0xE7E7E7 ].
SliderBase
  
trackHighlightSkin
Type: Class   CSS Inheritance: no
The skin for the slider track when it is selected.
SliderBase
  
trackMargin
Type: Number   Format: Length   CSS Inheritance: no
The size of the track margins, in pixels. If undefined, then the track margins will be determined by the length of the first and last labels. If given a value, Flex attempts to fit the labels in the available space. The default value is undefined.
SliderBase
  
trackSkin
Type: Class   CSS Inheritance: no
The skin for the slider track.
SliderBase
Property detail
allowThumbOverlapproperty
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.

allowTrackClickproperty 
public var allowTrackClick:Boolean = true

Specifies whether clicking on the track will move the slider thumb.

The default value is true.

dataTipFormatFunctionproperty 
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.

Implementation
    public function get dataTipFormatFunction():Function
    public function set dataTipFormatFunction(value:Function):void
directionproperty 
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 HSlider and VSlider controls set this property for you; do not set it when using those controls.

The default value is SliderDirection.HORIZONTAL.

Implementation
    public function get direction():String
    public function set direction(value:String):void

See also

mx.controls.sliderClasses.SliderDirection
labelsproperty 
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.

Implementation
    public function get labels():Array
    public function set labels(value:Array):void
liveDraggingproperty 
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.

maximumproperty 
maximum:Number  [read-write]

The maximum allowed value on the slider.

The default value is 10.

Implementation
    public function get maximum():Number
    public function set maximum(value:Number):void
minimumproperty 
minimum:Number  [read-write]

The minimum allowed value on the slider control.

The default value is 0.

Implementation
    public function get minimum():Number
    public function set minimum(value:Number):void
showDataTipproperty 
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.

sliderDataTipClassproperty 
sliderDataTipClass:Class  [read-write]

A reference to the class to use for the data tip.

The default value is SliderDataTip.

Implementation
    public function get sliderDataTipClass():Class
    public function set sliderDataTipClass(value:Class):void
sliderThumbClassproperty 
sliderThumbClass:Class  [read-write]

A reference to the class to use for each thumb.

The default value is SliderThumb.

Implementation
    public function get sliderThumbClass():Class
    public function set sliderThumbClass(value:Class):void
snapIntervalproperty 
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.

Implementation
    public function get snapInterval():Number
    public function set snapInterval(value:Number):void
thumbCountproperty 
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.

Implementation
    public function get thumbCount():int
    public function set thumbCount(value:int):void
tickIntervalproperty 
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.

Implementation
    public function get tickInterval():Number
    public function set tickInterval(value:Number):void
tickValuesproperty 
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.

Implementation
    public function get tickValues():Array
    public function set tickValues(value:Array):void
valueproperty 
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
valuesproperty 
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
Constructor detail
SliderBase()constructor
public function SliderBase()

Constructor.

Method detail
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.

Parameters
index:int — The zero-based index number of the thumb.

Returns
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.

Parameters
index: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.

Parameters
unscaledWidth: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.
Event detail
changeevent 
Event object type: 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.

thumbDragevent  
Event object type: 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.

thumbPressevent  
Event object type: mx.events.SliderEvent

Dispatched when the slider's thumb is pressed, meaning the user presses the mouse button over the thumb.

thumbReleaseevent  
Event object type: mx.events.SliderEvent

Dispatched when the slider's thumb is released, meaning the user releases the mouse button after a thumbPress event.