(Preview)
| Package | mx.controls |
| Class | public class HSlider |
| Inheritance | HSlider  Slider UIComponent FlexSprite Sprite DisplayObjectContainer InteractiveObject DisplayObject EventDispatcher Object |
| Language Version: | ActionScript 3.0 |
| Product Version: | Flex 3 |
| Runtime Versions: | Flash Player 9, AIR 1.1 |
 | Starting with Flex 4.0, Adobe recommends that you use the spark.components.HSlider class as an alternative to this class. |
The HSlider control lets 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 may allow a continuous range of values between its minimum and maximum values or it may be restricted to values at specific intervals between the minimum and maximum value. It may show tick marks at specified intervals along the track. These tick marks are independent of the allowed values of the slider. The slider may also use a data tip to display its current value.
The HSlider control has a horizontal direction. The slider track stretches from left to right, and the labels and tick marks are placed at the top or bottom of the track.
The HSlider control has the following default characteristics:
| Characteristic | Description |
|---|---|
| Default size | 250 pixels wide, high enough to hold the slider and any associated labels |
| Minimum size | None |
| Maximum size | None |
Show MXML Syntax
Hide MXML SyntaxThe <mx:HSlider> tag inherits all of the tag attributes
of its superclass, and adds the following tag attribute:
<mx:HSlider
Styles
dataTipPlacement="top"
/>
More examples
Related API Elements
mx.controls.VSlider
mx.controls.sliderClasses.Slider
mx.controls.sliderClasses.SliderThumb
mx.controls.sliderClasses.SliderDataTip
mx.controls.sliderClasses.SliderLabel
mx.controls.sliderClasses.Slider
mx.controls.sliderClasses.SliderThumb
mx.controls.sliderClasses.SliderDataTip
mx.controls.sliderClasses.SliderLabel
Public Properties
Protected Properties
Public Methods
| Method | Defined By | ||
|---|---|---|---|
 |
Adds a child DisplayObject instance to this DisplayObjectContainer instance. | DisplayObjectContainer | |
|
Adds a child DisplayObject instance to this DisplayObjectContainer
instance. | DisplayObjectContainer | |
| addEventListener(type:String, listener:Function, useCapture:Boolean = false, priority:int = 0, useWeakReference:Boolean = false):void
Registers an event listener object with an EventDispatcher object so that the listener
receives notification of an event. | EventDispatcher | |
|
Indicates whether the security restrictions
would cause any display objects to be omitted from the list returned by calling
the DisplayObjectContainer.getObjectsUnderPoint() method
with the specified point point. | DisplayObjectContainer | |
|
Determines whether the specified display object is a child of the DisplayObjectContainer instance or
the instance itself. | DisplayObjectContainer | |
|
Returns a rectangle that defines the area of the display object relative to the coordinate system
of the targetCoordinateSpace object. | DisplayObject | |
|
Returns the child display object instance that exists at the specified index. | DisplayObjectContainer | |
|
Returns the child display object that exists with the specified name. | DisplayObjectContainer | |
|
Returns the index position of a child DisplayObject instance. | DisplayObjectContainer | |
|
Returns an array of objects that lie under the specified point and are children
(or grandchildren, and so on) of this DisplayObjectContainer instance. | DisplayObjectContainer | |
|
Returns a rectangle that defines the boundary of the display object,
based on the coordinate system defined by the targetCoordinateSpace
parameter, excluding any strokes on shapes. | DisplayObject | |
|
Converts the point object from the Stage (global) coordinates
to the display object's (local) coordinates. | DisplayObject | |
|
Converts a two-dimensional point from the Stage (global) coordinates to a
three-dimensional display object's (local) coordinates. | DisplayObject | |
|
Checks whether the EventDispatcher object has any listeners registered for a specific type
of event. | EventDispatcher | |
|
Indicates whether an object has a specified property defined. | Object | |
|
Evaluates the bounding box of the display object to see if it overlaps or intersects with the
bounding box of the obj display object. | DisplayObject | |
|
Evaluates the display object to see if it overlaps or intersects with the
point specified by the x and y parameters. | DisplayObject | |
|
Indicates whether an instance of the Object class is in the prototype chain of the object specified
as the parameter. | Object | |
|
Converts a three-dimensional point of the three-dimensional display
object's (local) coordinates to a two-dimensional point in the Stage (global) coordinates. | DisplayObject | |
|
Converts the point object from the display object's (local) coordinates to the
Stage (global) coordinates. | DisplayObject | |
|
Indicates whether the specified property exists and is enumerable. | Object | |
|
Removes the specified child DisplayObject instance from the child list of the DisplayObjectContainer instance. | DisplayObjectContainer | |
|
Removes a child DisplayObject from the specified index position in the child list of
the DisplayObjectContainer. | DisplayObjectContainer | |
|
Removes all child DisplayObject instances from the child list of the DisplayObjectContainer instance. | DisplayObjectContainer | |
|
Removes a listener from the EventDispatcher object. | EventDispatcher | |
|
Raises a virtual keyboard. | InteractiveObject | |
|
Changes the position of an existing child in the display object container. | DisplayObjectContainer | |
|
Sets the availability of a dynamic property for loop operations. | Object | |
|
Lets the user drag the specified sprite. | Sprite | |
|
Lets the user drag the specified sprite on a touch-enabled device. | Sprite | |
|
Recursively stops the timeline execution of all MovieClips rooted at this object. | DisplayObjectContainer | |
|
Ends the startDrag() method. | Sprite | |
|
Ends the startTouchDrag() method, for use with touch-enabled devices. | Sprite | |
|
Swaps the z-order (front-to-back order) of the two specified child objects. | DisplayObjectContainer | |
|
Swaps the z-order (front-to-back order) of the child objects at the two specified index positions in the
child list. | DisplayObjectContainer | |
|
Returns the string representation of this object, formatted according to locale-specific conventions. | Object | |
|
Returns the primitive value of the specified object. | Object | |
|
Checks whether an event listener is registered with this EventDispatcher object or any of
its ancestors for the specified event type. | EventDispatcher | |
Protected Methods
Styles
Styles are either common or associated with a specific theme. If the style is common, it can be used with any theme. If a style is associated with a specific theme, it can only be used if your application uses that theme.
Common Styles
| Style | Description | Defined By | ||
|---|---|---|---|---|
| Type: String CSS Inheritance: No Language Version: ActionScript 3.0 Product Version: Flex 3 Runtime Versions: Flash9, AIR 1.1 The vertical distance in pixels from the top edge of the content area to the control's baseline position. | UIComponent | ||
| Type: String CSS Inheritance: No Language Version: ActionScript 3.0 Product Version: Flex 3 Runtime Versions: Flash9, AIR 1.1 The vertical distance, in pixels, from the bottom edge of the component to the bottom edge of its parent container's content area. | UIComponent | ||
| Type: Number Format: Length CSS Inheritance: No Language Version: ActionScript 3.0 Product Version: Flex 3 Runtime Versions: Flash9, AIR 1.1 The offset, in pixels, of the data tip relative to the thumb. | Slider | ||
dataTipPlacement | Type: String CSS Inheritance: No Language Version: ActionScript 3.0 Product Version: Flex 3 Runtime Versions: Flash9, AIR 1.1 The location of the data tip relative to the thumb. Possible values are "left", "right",
"top", and "bottom".
The default value is "top". | HSlider | ||
| Type: int CSS Inheritance: No Language Version: ActionScript 3.0 Product Version: Flex 3 Runtime Versions: Flash9, AIR 1.1 Number of decimal places to use for the data tip text. | Slider | ||
| Type: String CSS Inheritance: No Language Version: ActionScript 3.0 Product Version: Flex 3 Runtime Versions: Flash9, AIR 1.1 The name of the style declaration to use for the data tip. | Slider | ||
| Type: uint Format: Color CSS Inheritance: Yes Language Version: ActionScript 3.0 Product Version: Flex 3 Runtime Versions: Flash9, AIR 1.1 Color of the component highlight when validation fails. | UIComponent | ||
| Type: String CSS Inheritance: No Language Version: ActionScript 3.0 Product Version: Flex 3 Runtime Versions: Flash9, AIR 1.1 Blend mode used by the focus rectangle. | UIComponent | ||
| Type: Class CSS Inheritance: No Language Version: ActionScript 3.0 Product Version: Flex 3 Runtime Versions: Flash9, AIR 1.1 Skin used to draw the focus rectangle. | UIComponent | ||
| Type: Number Format: Length CSS Inheritance: No Language Version: ActionScript 3.0 Product Version: Flex 3 Runtime Versions: Flash9, AIR 1.1 Thickness, in pixels, of the focus rectangle outline. | UIComponent | ||
| Type: String CSS Inheritance: No Language Version: ActionScript 3.0 Product Version: Flex 3 Runtime Versions: Flash9, AIR 1.1 The horizontal distance in pixels from the center of the component's content area to the center of the component. | UIComponent | ||
| Type: String CSS Inheritance: Yes Language Version: ActionScript 3.0 Product Version: Flex 4.5 Runtime Versions: Flash10, AIR 2.5 The primary interaction mode for this component. | UIComponent | ||
| Type: Boolean CSS Inheritance: No Language Version: ActionScript 3.0 Product Version: Flex 3 Runtime Versions: Flash9, AIR 1.1 Invert the direction of the thumbs. | Slider | ||
| Type: Number Format: Length CSS Inheritance: No Language Version: ActionScript 3.0 Product Version: Flex 3 Runtime Versions: Flash9, AIR 1.1 The y-position offset (if direction is horizontal) or x-position offset (if direction is vertical) of the labels relative to the track. | Slider | ||
| Type: String CSS Inheritance: No Language Version: ActionScript 3.0 Product Version: Flex 3 Runtime Versions: Flash9, AIR 1.1 The name of the style to use for the slider label. | Slider | ||
| Type: String CSS Inheritance: Yes Language Version: ActionScript 3.0 Product Version: Flex 4.1 Runtime Versions: Flash10, AIR 1.5 Specifies the desired layout direction of a component. | UIComponent | ||
| Type: String CSS Inheritance: No Language Version: ActionScript 3.0 Product Version: Flex 3 Runtime Versions: Flash9, AIR 1.1 The horizontal distance, in pixels, from the left edge of the component to the left edge of its parent container's content area. | UIComponent | ||
| Type: String CSS Inheritance: No Language Version: ActionScript 3.0 Product Version: Flex 3 Runtime Versions: Flash9, AIR 1.1 The horizontal distance, in pixels, from the right edge of the component to the right edge of its parent container's content area. | UIComponent | ||
| Type: Boolean CSS Inheritance: Yes Language Version: ActionScript 3.0 Product Version: Flex 4.5 Runtime Versions: Flash10, AIR 1.5 Show the error border or skin when this component is invalid | UIComponent | ||
| Type: Boolean CSS Inheritance: Yes Language Version: ActionScript 3.0 Product Version: Flex 4.5 Runtime Versions: Flash10, AIR 1.5 Show the error tip when this component is invalid and the user rolls over it | UIComponent | ||
| Type: Boolean CSS Inheritance: No Language Version: ActionScript 3.0 Product Version: Flex 3 Runtime Versions: Flash9, AIR 1.1 Specifies whether to enable track highlighting between thumbs (or a single thumb and the beginning of the track). | Slider | ||
| Type: Number Format: Time CSS Inheritance: No Language Version: ActionScript 3.0 Product Version: Flex 3 Runtime Versions: Flash9, AIR 1.1 Duration in milliseconds for the sliding animation when you click on the track to move a thumb. | Slider | ||
| Type: Function CSS Inheritance: No Language Version: ActionScript 3.0 Product Version: Flex 3 Runtime Versions: Flash9, AIR 1.1 Tweening function used by the sliding animation when you click on the track to move a thumb. | Slider | ||
| Type: Class CSS Inheritance: No Language Version: ActionScript 3.0 Product Version: Flex 3 Runtime Versions: Flash9, AIR 1.1 The skin for the slider thumb disabled state. | Slider | ||
| Type: Class CSS Inheritance: No Language Version: ActionScript 3.0 Product Version: Flex 3 Runtime Versions: Flash9, AIR 1.1 The skin for the slider thumb down state. | Slider | ||
| Type: Number Format: Length CSS Inheritance: No Language Version: ActionScript 3.0 Product Version: Flex 3 Runtime Versions: Flash9, AIR 1.1 The y-position offset (if direction is horizontal) or x-position offset (if direction is vertical) of the thumb relative to the track. | Slider | ||
| Type: Class CSS Inheritance: No Language Version: ActionScript 3.0 Product Version: Flex 3 Runtime Versions: Flash9, AIR 1.1 The skin for the slider thumb over state. | Slider | ||
| Type: Class CSS Inheritance: No Language Version: ActionScript 3.0 Product Version: Flex 3 Runtime Versions: Flash9, AIR 1.1 The default skin for the slider thumb. | Slider | ||
| Type: Class CSS Inheritance: No Language Version: ActionScript 3.0 Product Version: Flex 3 Runtime Versions: Flash9, AIR 1.1 The skin for the slider thumb up state. | Slider | ||
| Type: uint Format: Color CSS Inheritance: No Language Version: ActionScript 3.0 Product Version: Flex 3 Runtime Versions: Flash9, AIR 1.1 The color of the tick marks. | Slider | ||
| Type: Number Format: Length CSS Inheritance: No Language Version: ActionScript 3.0 Product Version: Flex 3 Runtime Versions: Flash9, AIR 1.1 The length in pixels of the tick marks. | Slider | ||
| Type: Number Format: Length CSS Inheritance: No Language Version: ActionScript 3.0 Product Version: Flex 3 Runtime Versions: Flash9, AIR 1.1 The y-position offset (if direction is horizontal) or x-position offset (if direction is vertical) of the tick marks relative to the track. | Slider | ||
| Type: Number Format: Length CSS Inheritance: No Language Version: ActionScript 3.0 Product Version: Flex 3 Runtime Versions: Flash9, AIR 1.1 The thickness in pixels of the tick marks. | Slider | ||
| Type: String CSS Inheritance: No Language Version: ActionScript 3.0 Product Version: Flex 3 Runtime Versions: Flash9, AIR 1.1 The vertical distance, in pixels, from the top edge of the component to the top edge of its parent container's content area. | UIComponent | ||
| Type: Class CSS Inheritance: No Language Version: ActionScript 3.0 Product Version: Flex 3 Runtime Versions: Flash9, AIR 1.1 The skin for the slider track when it is selected. | Slider | ||
| Type: Number Format: Length CSS Inheritance: No Language Version: ActionScript 3.0 Product Version: Flex 3 Runtime Versions: Flash9, AIR 1.1 The size of the track margins, in pixels. | Slider | ||
| Type: Class CSS Inheritance: No Language Version: ActionScript 3.0 Product Version: Flex 3 Runtime Versions: Flash9, AIR 1.1 The skin for the slider track. | Slider | ||
| Type: String CSS Inheritance: No Language Version: ActionScript 3.0 Product Version: Flex 3 Runtime Versions: Flash9, AIR 1.1 The vertical distance in pixels from the center of the component's content area to the center of the component. | UIComponent | ||
Spark Theme Styles
Halo Theme Styles
Public Constants
Constructor Detail
Examples How to use this example
SimpleImageHSlider.mxml
<?xml version="1.0" encoding="utf-8"?>
<!-- Simple example to demonstrate the Halo HSlider control. -->
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx">
<fx:Script>
<![CDATA[
private var imageWidth:Number = 0;
private var imageHeight:Number = 0;
// Event handler function to change the image size.
private function changeSize():void
{
phoneImage.width = uint(imageWidth * hSlider.value / 100);
phoneImage.height = uint(imageHeight * hSlider.value / 100);
}
]]>
</fx:Script>
<s:Panel id="panel" title="Halo HSlider Control Example"
width="75%" height="75%"
horizontalCenter="0" verticalCenter="0">
<s:VGroup left="10" right="10" top="10" bottom="10">
<s:HGroup height="100%" width="100%">
<mx:Image id="phoneImage" source="@Embed('assets/Nokia_6630.png')"
creationComplete="imageWidth = phoneImage.width; imageHeight = phoneImage.height;" />
</s:HGroup>
<s:Label color="blue" text="Drag the slider to resize the image."/>
<mx:HSlider id="hSlider"
minimum="0" maximum="100" value="100"
dataTipPlacement="top"
tickColor="black"
snapInterval="1" tickInterval="10"
labels="[0%,100%]"
allowTrackClick="true"
liveDragging="true"
change="changeSize();"/>
</s:VGroup>
</s:Panel>
</s:Application>
Wed Nov 21 2018, 06:34 AM -08:00