Flex 2 Developer's Guide > Building User Interfaces for Flex Applications > Using Controls > HSlider and VSlider controls

HSlider and VSlider controls

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, corresponding 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, or it can be one of a set of discrete values, depending on how you configure the control.

Subtopics

About Slider controls

Flex provides two sliders: the HSlider (Horizontal Slider) control, which creates a horizontal slider, and the VSlider (Vertical Slider) control, which creates a vertical slider. The following example shows the HSlider and VSlider controls:

This example includes the data tip, slider thumb, track, tick marks, and labels. You can optionally show or hide data tips, tick marks, and labels.

The following code example reproduces this image (without annotations):

<?xml version="1.0"?>
<!-- controls\slider\HSliderSimple.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    
    <mx:HBox>
        <mx:VBox>
            <mx:HSlider 
                tickInterval="2" 
                labels="['min', 'max']" height="150"/>
            <mx:HSlider/>
        </mx:VBox>
        
        <mx:VSlider 
            tickInterval="2" 
            labels="['min', 'max']"/>
    </mx:HBox>
</mx:Application>

The HSlider and VSlider controls have the following default properties:

Creating a Slider control

You define an HSlider control in MXML using the <mx:HSlider> tag and a VSlider control using the <mx:VSlider> tag. You must specify an id value if you intend to refer to a component elsewhere, either in another tag or in an ActionScript block.

The following code example creates four HSlider controls:

• The first slider has a maximum value of 100, and lets the user move the slider thumb to select a value in the continuous range between 0 and 100.
• The second slider uses the snapInterval property to define the discrete values between the minimum and maximum that the user can select. In this example, the snapInterval is 5, which means that the user can select the values 0, 5, 10, 15, and so on.
• The third slider uses the tickInterval property to add tick marks and set the interval between the tick marks to 25, so that Flex displays a tick mark along the slider corresponding to the values 0, 25, 50, 75, and 100. Flex displays tick marks whenever you set the tickInterval property to a nonzero value.
• The fourth slider uses the labels property to add labels and set them at each tick mark. The labels property accepts an array of values to display. It automatically distributes them evenly along the slider. The first value always corresponds to the leftmost edge of the slider and the last value always corresponds to the rightmost edge of the slider.

<?xml version="1.0"?>
<!-- controls\slider\HSliderSimple.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    
    <mx:VBox>
        <mx:HSlider 
            maximum="100"/>
        <mx:HSlider  
            maximum="100"
            snapInterval="5"/>
        <mx:HSlider 
            maximum="100"
            snapInterval="5" 
            tickInterval="25"/>
        <mx:HSlider 
            maximum="100"
            snapInterval="5"
            tickInterval="25" 
            labels="[0,25,50,75,100]"/>
    </mx:VBox>
</mx:Application>

This example produces the following image:

You can do a similar thing by using VSlider controls:

<?xml version="1.0"?>
<!-- controls\slider\VSliderSimple.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    
    <mx:HBox>
        <mx:VSlider 
            maximum="100"/>
        <mx:VSlider  
            maximum="100"
            snapInterval="5"/>
        <mx:VSlider 
            maximum="100"
            snapInterval="5" 
            tickInterval="25"/>
        <mx:VSlider 
            maximum="100"
            snapInterval="5"
            tickInterval="25" 
            labels="[0,25,50,75,100]"/>
    </mx:HBox>
</mx:Application>

This code results in the following application:

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 Text control:

<?xml version="1.0"?>
<!-- controls\slider\HSliderBinding.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    
    <mx:HSlider id="mySlider" maximum="100"/>
    <mx:Text text="{mySlider.value}"/>
</mx:Application>

This code produces the following image:

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 use an event 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:

The following code example uses a change event to show the current value of the slider in a TextArea control when the user releases the slider thumb:

<?xml version="1.0"?>
<!-- controls\slider\HSliderEvent.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    
    <mx:Script>
        <![CDATA[

            import mx.events.SliderEvent;
            import mx.controls.sliderClasses.Slider;

            private function sliderChange(event:SliderEvent):void {
                var currentSlider:Slider=Slider(event.currentTarget);
                thumb.text=String(currentSlider.value);
            }
        ]]>
    </mx:Script>
    
    <mx:HSlider change="sliderChange(event);"/>
    <mx:TextArea id="thumb"/>
</mx:Application>

By default, the liveDragging property of the slider control is set to false, which 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 the following example shows:

<?xml version="1.0"?>
<!-- controls\slider\HSliderEventLiveDrag.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    
    <mx:Script>
        <![CDATA[
            import mx.events.SliderEvent;
            import mx.controls.sliderClasses.Slider;

            private function sliderChangeLive(event:SliderEvent):void {
                var currentSlider:Slider=Slider(event.currentTarget);
                thumbLive.text=String(currentSlider.value);
            }
        ]]>
    </mx:Script>
    
    <mx:HSlider 
        liveDragging="true" 
        change="sliderChangeLive(event);"/>
    <mx:TextArea id="thumbLive"/>
</mx:Application>

Using multiple thumbs

You can configure a slider control to have one thumb, or two thumbs. If you configure the slider to use a single thumb, you can move the thumb anywhere between the end points of the slider. If you configure it to have two thumbs, you cannot drag one thumb across the other thumb.

When you configure a slider control to have two thumbs, you use the values property of the control to access the current value of each thumb. The values property is a two-element array that contains the current value of the thumbs, as the following example shows:

<?xml version="1.0"?>
<!-- controls\slider\HSliderMultThumb.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    
    <mx:Script>
        <![CDATA[
            import mx.events.SliderEvent;
            import mx.controls.sliderClasses.Slider;

            private function sliderChangeTwo(event:SliderEvent):void {
                var ct:Slider=Slider(event.currentTarget);
                thumbTwoA.text=String(ct.values[0]);
                thumbTwoB.text=String(ct.values[1]);
                thumbIndex.text=String(event.thumbIndex);
            }
        ]]>
    </mx:Script>
    
    <mx:HSlider thumbCount="2" 
        change="sliderChangeTwo(event);"/>
    <mx:TextArea id="thumbTwoA"/>
    <mx:TextArea id="thumbTwoB"/>
    <mx:TextArea id="thumbIndex"/>
</mx:Application>

This example also uses the thumbIndex property of the event object. This property has a value of 0 if the user modified the position of the first thumb, and a value of 1 if the user modified the position of the second thumb.

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, and returns a String containing the new data tip text, as the following example shows:

<?xml version="1.0"?>
<!-- controls\slider\HSliderDataTip -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    
    <mx:Script>
        <![CDATA[
            private function myDataTipFunc(val:String):String {
                return "Current value: " + String(val);
            }
        ]]>
    </mx:Script>

    <mx:HSlider  
        height="80"
        dataTipFormatFunction="myDataTipFunc"/> 
</mx:Application>

This code produces the following image:

In this example, the data tip function prepends the data tip text with the String "Current value: ". You can modify this example to insert a dollar sign ($) prefix on the data tip for a slider that controls the price of an item.

Keyboard navigation

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

Flex 2.01