Slider

---

Alexa Sliderレスポンシブ対応コンポーネント（AlexaSlider）は、対話型の進行状況バーを表示します。ユーザーは、バーをドラッグしてコンテンツをスクラブしたり、設定を変更したりできます。

互換性

AlexaSliderは、alexa-viewport-profilesパッケージのすべての標準Viewportプロファイルで動作するように設計されています。次のプロファイルに対応しています。

• すべての円形デバイスプロファイル
• すべての横長デバイスプロファイル
• すべての縦長デバイスプロファイル
• すべてのモバイルプロファイル
• すべてのテレビプロファイル

サポートされていないViewportでAlexaSliderを使用すると、予期しない結果になることがあります。Viewportプロファイルの詳細については、Viewportプロファイルを参照してください。

alexa-layoutsパッケージをインポートする

AlexaSliderを使用するには、alexa-layoutsパッケージをインポートします。

alexa-layoutsパッケージの最新バージョンは1.7.0です。AlexaSliderはバージョン1.2.0で導入されました。

AlexaSliderのパラメーター

typeとsliderId以外のパラメーターはすべてオプションです。

名前	型	デフォルト	説明	ウィジェットのサポート	追加されたバージョン
accessibilityLabel	文字列	[進行状況] out of [合計]（「[20 seconds] out of [2 minutes]」など）	進行状況バーを説明する文字列です。ユーザーがこのコンポーネントを選択すると、ボイスオーバーでこの文字列が読み上げられます。	サポートされません	1.2.0
bufferValue	数値	0	スライダーで、読み込みが完了しているバッファーの時間を表す値です。スライダーは、この値までの位置を明るい色で塗りつぶして表します。バッファーバーは、bufferValueがprogressValueより大きい場合に表示されます。isLoadingがfalseの場合に適用されます。	サポートされません	1.2.0
entities	配列	—	このコンポーネントにバインドするentityデータの配列です。	サポートされません	1.2.0
handleKeyDownCommand	キーボードイベントハンドラーの配列	—	スライダーがキーボードまたはDパッドからキーの押下を受け取ったときに実行する、キーボードイベントハンドラーの配列です。ユーザーがスライダーを操作したときにコマンドを実行するを参照してください。	サポートされません	1.2.0
iconLeftGraphicSource	文字列	AlexaSliderVolumnOff	スライダーの左側に表示するアイコンのベクターグラフィックのURLまたは直接参照です。sliderTypeがiconの場合に適用されます。	サポートされません	1.2.0
iconRightGraphicSource	文字列	AlexaSliderVolumn	スライダーの右側に表示するアイコンのベクターグラフィックのURLまたは直接参照です。sliderTypeがiconの場合に適用されます。	サポートされません	1.2.0
isLoading	ブール値	false	trueの場合、スライダーの塗りつぶされていない部分にアニメーションを表示して、コンテンツが読み込み中であることを示します。	サポートされません	1.2.0
layoutDirection	文字列	${environment.layoutDirection}	スライダーのレイアウト方向を指定します。このプロパティは、LTR（左から右）またはRTL（右から左）に設定します。このプロパティには、コンポーネントの親コンテナーのlayoutDirectionは継承されません。このため、必要に応じて明示的にこのプロパティを設定してください。 レスポンシブ対応コンポーネントでの右から左に記述する言語のサポートの詳細については、右から左に記述する言語のサポートを参照してください。	サポートされません	1.4.0
metadataDisplayed	ブール値	false	trueの場合、スライダーは現在のprogressValueと、合計時間を表すtotalValueを表示します。sliderTypeがdefaultの場合に適用されます。スライダーの種類を参照してください。	サポートされません	1.2.0
metadataPosition	文字列	above_right	defaultスライダーでのメタデータの位置を設定します。sliderTypeがdefaultでmetaDataDisplayedがtrueの場合に適用されます。above_right、above_left_right、below_left_rightのいずれかを設定します。	サポートされません	1.2.0
onBlurCommand	コマンドの配列	—	スライダーがフォーカスを失ったときに実行するコマンドの配列です。ユーザーがスライダーを操作したときにコマンドを実行するを参照してください。	サポートされません	1.2.0
onDownCommand	コマンドの配列	—	onDownイベントが発生したときに実行するコマンドの配列です。onDownイベントは、ユーザーがスライダーにタッチしたとき、またはスライダーを選択したときに発生します。ユーザーがスライダーを操作したときにコマンドを実行するを参照してください。	サポートされません	1.2.0
onFocusCommand	コマンドの配列	—	スライダーがフォーカスを受け取ったときに実行するコマンドの配列です。ユーザーがスライダーを操作したときにコマンドを実行するを参照してください。	サポートされません	1.2.0
onMoveCommand	コマンドの配列	—	onMoveイベントが発生したときに実行するコマンドの配列です。onMoveイベントは、ユーザーがスライダーのつまみを動かしたときに発生します。ユーザーがスライダーを操作したときにコマンドを実行するを参照してください。	サポートされません	1.2.0
onUpCommand	コマンドの配列	—	onUpイベントが発生したときに実行するコマンドの配列です。onUpイベントは、ユーザーがスライダーを解放したときに発生します。ユーザーがスライダーを操作したときにコマンドを実行するを参照してください。	サポートされません	1.2.0
positionPropertyName	文字列	Thumbposition	スライダーのつまみの現在位置を返すために使用するプロパティの名前です。これをデータバインディングで使用することで、ユーザーがスライダーを動かすのに応じて現在位置を特定できます。現在のつまみの位置を取得するを参照してください。	サポートされません	1.2.0
progressFillColor	色	@colorComponent	スライダーの進行状況を示すために使用する塗りつぶしの色です。	サポートされません	1.2.0
progressValue	数値	0	スライダーの完了済みの位置を表す値です。スライダーは、この位置までをprogressFillColorで指定された色で塗りつぶし、この位置にスライダーのつまみを表示します。progressValueはミリ秒で指定します。ただし、textスライダーでは値をパーセンテージで表します。	サポートされません	1.2.0
sliderId	文字列	Slider	（必須）AlexaSliderのこのインスタンスを表す一意の識別子です。AlexaSliderコンポーネントはこのIDを内部で使用します。ドキュメント内のほかのコンポーネントからこのコンポーネントを参照する必要がある場合は、基本コンポーネントのidプロパティも設定する必要があります。	サポートされません	1.2.0
sliderMoveMillisecond	数値	10000	キーボードやDパッドの使用時にスライダーを動かす時間をミリ秒で指定します。	サポートされません	1.2.0
sliderSize	文字列	small	スライダーの両端に表示されるインジケーターのサイズを設定します。sliderTypeがiconまたはtextの場合に適用されます。small、medium、largeのいずれかを設定します。	サポートされません	1.2.0
sliderType	文字列	default	スライダーが期間、アイコン（音量インジケーターなど）、パーセンテージのどれを表示するかを決定します。default、icon、textのいずれかを設定します。スライダーの種類を参照してください。	サポートされません	1.2.0
theme	文字列	dark	色のテーマをダークまたはライトに設定します。選択されたテーマによってコンポーネントの色が制御されます。	サポートされません	1.2.0
thumbColor	色	@colorComponent	スライダーのつまみアイコンの色です。	サポートされません	1.2.0
thumbDisplayedAllStates	ブール値	true	trueの場合、スライダーのつまみアイコンが常に表示されます。falseの場合、つまみアイコンはユーザーがスライダーを進めたり戻したりするまで表示されません。	サポートされません	1.2.0
totalValue	数値	0	スライダーが表す合計時間の値（ミリ秒）です。たとえば、totalValueを100,000に設定すると、1分40秒を表すスライダーが作成されます。合計時間は、画面に描画されるバーの幅を決定するものではありません。バーのサイズを決定するには、AlexaSliderまたは親Containerの標準のwidthプロパティを使用します。	サポートされません	1.2.0
type	文字列	—	常にAlexaSliderに設定します。	サポートされません	1.2.0

スライダーの種類

スライダーの全体的な外観はsliderTypeによって決まります。AlexaSliderでは、次の3種類がサポートされています。

• default - スライダーは時間を示します。metadataDisplayedを設定すると、現在の進行状況と共にバー全体の合計時間を表示できます。
• icon - スライダーは範囲の設定または値を表します。スライダーの両端には、特定の意味を表すアイコンが表示されます。たとえば、音量設定を表すスライダーでは、左端に「音量オフ」のアイコン、右端に「音量フル」のアイコンを表示できます。
• text - スライダーはパーセンテージを表します。スライダーの左端には「0%」、右端には「100%」と表示されます。ユーザーがスライダーを動かすと、左端の値が現在のパーセンテージを反映して更新されます。

次の例では、5つの異なる種類の進行状況バーを表示します。最初の2つにはdefaultスタイルを使用しています。3つ目はデフォルトの音量アイコンを使用したiconスライダーで、最後はtextスライダーです。

---

情報の表現方法はそれぞれ異なりますが、3種類のスライダーはいずれも、合計時間とスライダーの現在の進行状況をミリ秒単位で表します。

• totalValueには、合計時間をミリ秒で設定します。
• progressValueには、バーの進行状況を示すミリ秒数を設定します。この位置までの区間が色で塗りつぶされます。この値によって、スライダーのつまみ位置も決まります。ユーザーがスライダーを動かすと、このプロパティの元の値が新しい値でオーバーライドされます。
• bufferValueには、バッファーの進行状況を示すミリ秒数を設定します。この位置までの区間は2番目の色で塗りつぶされます。

スライダーのサイズ

種類がiconとtextのスライダーでアイコンとテキストのサイズを設定するには、sliderSizeを使用します。このプロパティは、スライダーの両端に表示されるアイコンまたはパーセンテージのサイズを変更します。

スライダーの長さを制御するには、基本コンポーネントのwidthプロパティを使用します。AlexaSliderコンポーネント自体または親Containerのwidthを設定します。バーの高さや太さはViewportのサイズによって決まります。この値は変更できません。

以下の例は、sliderSizeをsmall、medium、largeに設定したiconスライダーとtextスライダーを示しています。

small、medium、largeのアイコンスライダー

---

small、medium、largeのテキストスライダー

---

ユーザーがスライダーを操作したときにコマンドを実行する

AlexaSliderは、アクション可能なコンポーネントであり、タッチ可能なコンポーネントでもあります。つまり、onMoveハンドラーなど、ユーザーのアクションやタッチイベントを処理する追加のプロパティを備えています。AlexaSliderは、これらのハンドラーを使用してスライダーの対話操作を実現しています。

必要に応じて、これらのハンドラーで実行する追加のコマンドを提供して、ユーザーがスライダーを操作したときに応答することができます。次の各プロパティには、対応するイベントが発生したときに実行するコマンドの配列を設定できます。

• handleKeyDownCommand
• onBlurCommand
• onDownCommand
• onFocusCommand
• onMoveCommand
• onUpCommand

これらのプロパティに渡したコマンドは、スライダーの対話操作を実装するコマンドに加えて実行されます。

たとえば、次のコマンドは、ユーザーがスライダーを動かしたときに、handlerNameというプロパティの値を「onMove」という文字列に設定します。

このコマンドを使用する例については、AlexaSliderの例を参照してください。

現在のつまみの位置を取得する

スライダーのつまみの初期位置は、progressValueプロパティで設定します。ユーザーがスライダーを操作すると、つまみの現在位置が変更されます。定義したコマンド内でこの値にアクセスできます。

ユーザーがスライダーを動かしたときにつまみの現在位置を取得する

1. positionPropertyNameに、つまみの位置を表す名前を設定します。このプロパティのデフォルトの名前はThumbpositionです。
2. bindプロパティを使用して、このプロパティに対するバインディングを作成します。これにより、ドキュメントのほかのコンポーネントからプロパティにアクセスできるようになります。
3. コマンド内で、データバインディング構文を使用してバインド変数を参照します。

たとえば、次のContainerは2つのバインディングを作成しています。1つはThumbposition用で、もう1つはhandlerNameという変数用です。

このContainerには、これらの各値を表示するTextコンポーネントがあります。

次に、AlexaSliderコンポーネントでpositionPropertyNameにThumbpositionを設定し、各ハンドラーにSetValueコマンドを定義します。ユーザーがスライダーを操作すると、Textコンポーネントに現在のThumbpositionとアクティブなハンドラー名が表示されます。

このテクニックを使用するドキュメントの例全体については、AlexaSliderの例を参照してください。

AlexaSliderの例

次の例は、スライダーを含むドキュメント全体を示しています。ユーザーがスライダーのつまみを動かすと、テキストが更新されます。その後、ボタンを押すとスライダーが0にリセットされます。

---

関連トピック

• APL向けAlexaデザインシステム
• レスポンシブ対応コンポーネントとテンプレート
• Alexaデザインガイド： レスポンシブ対応コンポーネント（英語のみ）

---

---

最終更新日: 2025 年 11 月 19 日