スライダコントロールを使用すると、スライダトラックの両端の間でスライダサムを移動することで値を選択できます。スライダの現在の値は、スライダの両終点の間におけるサムの相対位置によって決定されます。スライダの両終点は、スライダの最小値と最大値に対応します。

デフォルトでは、スライダの最小値は 0、最大値は 10 に設定されています。スライダが最小値から最大値までの範囲を無段階に移動できるか、または段階的にのみ移動できるかは、スライダコントロールの設定に依存します。

スライダコントロールについて

Flex には 2 つのスライダが用意されています。HSlider（Horizontal Slider）コントロールは水平方向のスライダを、VSlider（Vertical Slider）コントロールは垂直方向のスライダを生成します。次の例は、HSlider コントロールと VSlider コントロールを示しています。

この例では、データヒント、スライダサム、トラック、目盛りおよびラベルが使われています。データヒント、目盛りおよびラベルは表示することも、非表示にすることも可能です。

次のコード例は、この図を再生成しています（注釈なし）。

<?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>
前の例で実行する SWF ファイルは以下のとおりです。

Slider コントロールの作成

HSlider コントロールは <mx:HSlider> タグを、VSlider コントロールは <mx:VSlider> タグを使用して MXML 内で定義します。コンポーネントを他のタグまたは ActionScript ブロックから参照する場合は、id の値を指定する必要があります。

次のコード例は、4 つの HSlider コントロールを作成しています。

• 1 つ目のスライダは、最大値を 100 に設定し、ユーザーがスライダのサムを移動して 0 から 100 までの値を無段階に選択できるようにします。
• 2 つ目のスライダは、snapInterval プロパティを使用して、最小値から最大値の範囲に段階的な値を定義し、ユーザーが決められた値のみ選択できるようにします。この例では、snapInterval を 5 に設定しています。つまり、ユーザーは 0、5、10、15 のように段階的に値を選択できます。
• 3 つ目のスライダは、tickInterval プロパティを使用して目盛りを追加し、その間隔を 25 に設定しています。したがって、0、25、50、75、100 の値に対応する位置に目盛りが表示されます。目盛りは tickInterval プロパティに 0 以外の値を設定すると表示されます。
• 4 つ目のスライダは、labels プロパティを使用してラベルを追加し、各目盛りにラベルを設定しています。labels プロパティは、表示する値の配列を受け取り、自動的にそれらの値をスライダに沿って均等に配分します。最初の値は常にスライダの左端に対応し、最後の値は常にスライダの右端に対応します。

<?xml version="1.0"?>
<!-- controls\slider\HSlider4Sliders.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>
前の例で実行する SWF ファイルは以下のとおりです。

この例では、次のイメージが生成されます。

VSlider コントロールでも、同様の操作を実行できます。

<?xml version="1.0"?>
<!-- controls\slider\VSlider4Sliders.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>
前の例で実行する SWF ファイルは以下のとおりです。

これで次のようなアプリケーションになります。

スライダの value プロパティを別のコントロールにバインドして、現在の値を表示させることもできます。次の例では value プロパティを Text コントロールにバインドしています。

<?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>
前の例で実行する SWF ファイルは以下のとおりです。

このコードでは、次のイメージが作成されます。

スライダのイベントの使用

スライダコントロールでは、ユーザーがサムを最大値と最小値の範囲内で移動することによって値を選択できます。ユーザーがいつサムを移動したかを認識し、そのときにスライダに関連付けられている値を取得するには、スライダのイベントを使用します。

次の表に、スライダコントロールによって送出されるイベントを示します。

次のコード例は、ユーザーがスライダサムを離したときに change イベントを使用して、TextArea コントロールにスライダの現在の値を表示しています。

<?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>
前の例で実行する SWF ファイルは以下のとおりです。

スライダコントロールの liveDragging プロパティはデフォルトで false に設定されています。つまり、ユーザーがスライダサムを離したときに change イベントが送出されます。次の例のように、liveDragging に true を設定した場合は、ユーザーがサムを移動している間、change イベントが継続的に送出されます。

<?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>
前の例で実行する SWF ファイルは以下のとおりです。

複数のサムの使用

スライダコントロールで 2 つのサムを使用するように設定できます。サムを 1 つだけ使用するようにスライダを設定した場合は、スライダの端から端までの任意の位置にサムを移動できます。2 つのサムを使用するように設定した場合、一方のサムがもう一方のサムを越えて移動することはできません。

2 つのサムを使うようにスライダコントロールを設定した場合は、そのスライダコントロールの values プロパティを使用して、各サムの現在の値にアクセスします。values プロパティは、サムの現在の値を保持する 2 つの要素から成る配列です。次にその例を示します。

<?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>
前の例で実行する SWF ファイルは以下のとおりです。

この例では、イベントオブジェクトの thumbIndex プロパティも使用されています。このプロパティは、ユーザーによって 1 つ目のサムの位置が変更されていた場合は 0 を、2 つ目のサムの位置が変更されていた場合は 1 を保持します。

データヒントの使用

デフォルトでは、スライダのサムを選択すると、そのスライダの現在の値を示すデータヒントが表示されます。選択されたサムを移動すると、データヒントの値もそれに伴って更新されます。データヒントは、showDataTip プロパティを false に設定することによって無効にできます。

dataTipFormatFunction プロパティを使用してコールバック関数を指定することにより、データヒントテキストの形式を設定できます。この関数はデータヒントテキストを保持する String 型のパラメータを 1 つ取り、新しいデータヒントテキストが格納されたストリングを返します。次にその例を示します。

<?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>
前の例で実行する SWF ファイルは以下のとおりです。

このコードでは、次のイメージが作成されます。

この例のデータヒント関数は、データヒントテキストの前に「Current value:」というストリングを付加します。この例を応用し、データヒントの前にドル記号（$）が挿入されるようにすれば、商品の価格を制御するスライダを作成することもできます。

キーボード操作

スライダコントロールにフォーカスが置かれているとき、HSlider コントロールと VSlider コントロールでは、次のようなキーボード操作を実行できます。