Flex 2 開発ガイド > Flex アプリケーションのユーザーインターフェイスの作成 > コントロールの使用 > HSlider コントロールと VSlider コントロール

HSlider コントロールと VSlider コントロール

スライダコントロールを使用すると、スライダトラックの両端の間でスライダサムを移動することで値を選択できます。スライダの現在の値は、その両端 (スライダの最小値と最大値に対応) とサムの相対的な位置関係によって決まります。

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

サブトピック

スライダコントロールについて 311
Slider コントロールの作成 312
スライダのイベントの使用 315
複数のサムの使用 316
データヒントの使用 317
キーボード操作 318

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

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


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>

HSlider コントロールと VSlider コントロールには、次のデフォルトプロパティがあります。

プロパティ

デフォルト値

デフォルトサイズ

水平スライダ 幅は 250 ピクセル、高さはスライダとそのラベルを表示できるだけのサイズになります。

垂直スライダ 高さは 250 ピクセル、幅はスライダとそのラベルを表示できるだけのサイズになります。

最小サイズ

なし

最大サイズ

なし

Slider コントロールの作成

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

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

<?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>

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


HSlider コントロールと snapInterval

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

<?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>

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


VSlider コントロールと snapInterval

スライダの 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>

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


Text コントロールにバインドされた HSlider コントロール

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

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

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

イベント

説明
change

ユーザーがサムを移動したときに送出されます。liveDragging プロパティが true の場合、ユーザーがサムをドラッグしている間は、イベントが継続的に送出されます。liveDragging プロパティが false の場合、ユーザーがスライダサムを離したときに、イベントが送出されます。
thumbDrag

ユーザーがサムを移動したときに送出されます。
thumbPress

ユーザーがマウスポインタを使ってサムを選択したときに送出されます。
thumbRelease

thumbPress イベントの発生後、ユーザーがマウスポインタを離したときに送出されます。

次のコード例は、ユーザーがスライダサムを離したときに 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>

スライダコントロールの 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>

複数のサムの使用

スライダコントロールで 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>

また、この例には、イベントオブジェクトの 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>

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


HSlider コントロールとカスタムツールヒント

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

キーボード操作

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

キー

説明

← (左矢印)

HSlider コントロールの値を 1 スナップ間隔分減らします。スナップ間隔が指定されていない場合は、1 ピクセル分減らします。

→ (右矢印)

HSlider コントロールの値を 1 スナップ間隔分増やします。スナップ間隔が指定されていない場合は、1 ピクセル分増やします。

Home

HSlider コントロールのサムを最小値まで移動します。

End

HSlider コントロールのサムを最大値まで移動します。

↑ (上矢印)

VSlider コントロールの値を 1 スナップ間隔分増やします。スナップ間隔が指定されていない場合は、1 ピクセル分増やします。

↓ (下矢印)

VSlider コントロールの値を 1 スナップ間隔分減らします。スナップ間隔が指定されていない場合は、1 ピクセル分減らします。

PageDown

VSlider コントロールのサムを最小値まで移動します。

PageUp

VSlider コントロールのサムを最大値まで移動します。

Flex 2.01