HSlider and VSlider controls

The HSlider and VSlider controls are part of both the MX and Spark component sets. While you can use the MX HSlider and VSlider controls in your application, Adobe recommends that you use the Spark controls instead.

You can use the slider controls to 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. The slider end points correspond to the slider’s minimum and maximum values.

By default, the minimum value of a slider is 0 and the maximum value is 10. The current value of the slider can be any value in a continuous range between the minimum and maximum values. It can also be one of a set of discrete values, depending on how you configure the control.

About slider controls

Flex provides two slider controls: the HSlider (Horizontal Slider) control, which creates a horizontal slider, and the VSlider (Vertical Slider) control, which creates a vertical slider. The slider controls contain a track and a slider thumb. You can optionally show or hide tooltips and data tips, which show the data value as the user drags the slider thumb. The slider controls do not contain a label property, but you can add labels to the component skin.

The following code example shows a horizontal slider and a vertical slider with different properties set. In the horizontal slider, the values increment and decrement by a value of 0.25. In the vertical slider, the data tip is hidden but a tool tip is visible.

<?xml version="1.0"?>
<!-- controls\slider\HSliderSimple.mxml -->
<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">
    
    <s:Group>
        <s:layout>
            <s:HorizontalLayout paddingTop="10" 
                paddingLeft="10"/>
            </s:layout>
        <s:HSlider id="horizontalBar" 
            snapInterval=".25"/>
        <s:VSlider id="volumeBar" 
            showDataTip="false"
            toolTip="Volume"/>
    </s:Group>
</s:Application>

The executing SWF file for the previous example is shown below:

Creating a slider control

You define an HSlider control in MXML by using the <s:HSlider> tag. Define a VSlider control by using the <s:VSlider> tag. Specify an id value if you intend to refer to a component elsewhere, either in another tag or in an ActionScript block.

You can bind the value property of a slider to another control to display the current value of the slider. The following example binds the value property to a Label box. Because the liveDragging style property is set to true, the value in the text box updates as the slider moves. The dataTipPrecision property is set to 0 to show whole numbers.

<?xml version="1.0"?>
<!-- controls\slider\HSliderBinding.mxml -->
<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">

    <s:Group>
        <s:layout>
            <s:HorizontalLayout paddingTop="10" 
                paddingLeft="10"/>
            </s:layout>
        <s:HSlider id="mySlider" 
            liveDragging="true"
            dataTipPrecision="0"/>
        <s:Label text="The slider value is: {Math.round(mySlider.value)}"/>
    </s:Group>
        
</s:Application>

The executing SWF file for the previous example is shown below:

Using slider events

The slider controls let the user select a value by moving the slider thumb between the minimum and maximum values of the slider. You typically use events with the slider to recognize when the user has moved the thumb and to determine the current value associated with the slider.

The slider controls can dispatch the events described in the following table:

Event

Description

change

Dispatches when the user moves the thumb. 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

Dispatches when the user moves a thumb.

thumbPress

Dispatches when the user selects a thumb by using the pointer.

thumbRelease

Dispatches when the user releases the pointer after a thumbPress event occurs.

The following code example uses a change event to enable a Submit button when the user releases the slider thumb:

<?xml version="1.0"?>
<!-- controls\slider\HSliderEvent.mxml -->
<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[
            public function changeRB():void {
            myButton.enabled=true;
            }
        ]]>
    </fx:Script>
    <s:Group>
        <s:layout>
            <s:VerticalLayout paddingTop="10" 
            paddingLeft="10"/>
        </s:layout>
        <s:HSlider id="mySlider" 
            thumbRelease="changeRB()"/>
        <s:Button id="myButton" enabled="false" label="Submit"/>
        
    </s:Group>
</s:Application>

The executing SWF file for the previous example is shown below:

By default, the liveDragging property of the slider control is set to false. A value of false means that the control dispatches the change event when the user releases the slider thumb. If you set liveDragging to true, the control dispatches the change event continuously as the user moves the thumb, as shown in Creating a slider control.

Using data tips

By default, when you select a slider thumb, a data tip appears, showing the current value of the slider. As you move the selected thumb, the data tip shows the new slider value. You can disable data tips by setting the showDataTip property to false.

You can use the dataTipFormatFunction property to specify a callback function to format the data tip text. This function takes a single String argument containing the data tip text. It returns a String containing the new data tip text, as the following example shows:

<?xml version="1.0"?>
<!-- controls\slider\HSliderDataTip -->
<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 function myDataTipFunc(val:String):String {
                return "Current value: " + String(val);
            }
        ]]>
    </fx:Script>
    <s:layout>
        <s:HorizontalLayout paddingTop="10"
            paddingLeft="10"/>
    </s:layout>
    <s:HSlider  
        height="80"
        dataTipFormatFunction="myDataTipFunc"/> 
</s:Application>

The executing SWF file for the previous example is shown below:

In this example, the data tip function prefixes the data tip text with the String "Current value:". You can modify this example to insert other characters, such as a dollar sign ($), on the data tip.

Keyboard navigation

The HSlider and VSlider controls have the following keyboard navigation features when the slider control has focus:

Key

Description

Left Arrow

Decrement the value of an HSlider control by one value interval or, if you do not specify a value interval, by one pixel.

Right Arrow

Increment the value of a HSlider control by one value interval or, if you do not specify a value interval, by one pixel.

Home

Moves the thumb of an HSlider control to its minimum value.

End

Moves the thumb of an HSlider control to its maximum value.

Up Arrow

Increment the value of an VSlider control by one value interval or, if you do not specify a value interval, by one pixel.

Down Arrow

Decrement the value of a VSlider control by one value interval or, if you do not specify a value interval, by one pixel.