Console

Settings

Sign out

Notifications

Alexa

Amazonアプリストア

AWS

ドキュメント

Support

My Cases

Console

Vega開発者向けドキュメント

ホーム

開発

設計と開発

公開

リファレンス

サポート

SeekBar

オープンベータ版ドキュメント：本テクニカルドキュメントは、リリース前のオープンベータ版の一部としてAmazonから提供されるものです。ここで説明されている機能は、Amazonがフィードバックを受け取り、機能の開発を繰り返す過程で変更される可能性があります。最新の機能の情報については、リリースノートを参照してください。

SeekBarコンポーネントは、メディアナビゲーション機能を備えた対話型の進行状況コントロールです。基本的な進行状況バーを拡張し、TVメディアプレーヤーでよく使用される高度な再生制御機能を提供します。

注： Amazonでは現在、TVのD-Pad入力のみをサポートしています。

使用シナリオ

SeekBarコンポーネントは、次のようなメディアナビゲーション機能を必要とするアプリに最適です。

ビデオ／オーディオプレーヤー
タイムラインのスクラブ
コンテンツのプレビューシステム
進行状況の追跡インターフェイス
対話型のメディアナビゲーション

このコンポーネントはプロパティを通じたカスタマイズが可能で、一貫性のある直感的なユーザーエクスペリエンスを維持しながら、固有のユースケースに合わせて動作と外観をカスタマイズできます。

ユーザーエクスペリエンス

コアプロパティ

currentValue

必須

コンテンツの進行状況を表す現在の位置の値。

クリップボードにコピーしました。

<SeekBar currentValue={300} totalValue={1200} />

型 number

0からtotalValueまでの値でなければなりません（両端の値を含む）。

totalValue

必須

シークバーの最大値。合計時間または範囲を表します。

クリップボードにコピーしました。

<SeekBar currentValue={0} totalValue={300} />

型 number

step

D-Padナビゲーションの使用時に増加または減少させる増減分量の値。正の値にすることも、負の値にすることもできます。

クリップボードにコピーしました。

<SeekBar step={1} currentValue={0} totalValue={120} />

型 number
デフォルト 10

対話制御プロパティ

disabled

すべてのユーザー操作とそのリモコンイベントを有効または無効にします。

クリップボードにコピーしました。

<SeekBar disabled={true} currentValue={0} totalValue={1200} />

型 boolean
デフォルト false

disabledWhenNotFocused

trueの場合、シークバーにフォーカスがないときのユーザー操作を無効にします。このプロパティは、フォーカス管理が不可欠なTVインターフェイスにとって重要であり、フォーカス管理をアプリコードで手動で行うのではなく、コンポーネントに自動的に処理させる場合に最適です。

クリップボードにコピーしました。

<SeekBar disabledWhenNotFocused={true} currentValue={0} totalValue={1200} />

型 boolean
デフォルト false

disableThumbnail

サムネイル画像のプレビュー機能を有効または無効にします。サムネイル画像を表示するには、thumbnailImageSourceプロパティを使用します。

クリップボードにコピーしました。

<SeekBar disableThumbnail={true} currentValue={0} totalValue={1200} />

型 boolean
デフォルト false

trapFocus

SeekBarコンポーネントのフォーカスナビゲーション動作を制御します。

クリップボードにコピーしました。

<SeekBar trapFocus={true} currentValue={0} totalValue={1200} />

型 boolean
デフォルト false

有効にすると、SeekBar内から左右方向へのD-Padによるフォーカスナビゲーションをトラップします。SeekBarの上または下にあるコントロールへの上下方向のナビゲーションは引き続き機能します。

partialDisablingConfiguration

どの特定のユーザー操作を無効にするかを制御します。

クリップボードにコピーしました。

<SeekBar
  partialDisablingConfiguration={{
    skipBackward: true,
    skipForward: true,
    playPause: false,
  }}
  currentValue={0}
  totalValue={1200}
/>

型 PartialDisablingConfiguration（型定義セクションを参照）

このプロパティを指定すると、グローバルのdisabledとdisabledWhenNotFocusedの設定がオーバーライドされます。

このプロパティは、特定のボタンだけを無効にする場合に便利です。たとえば、シーク動作（D-Padのrightとleft）を維持したまま、skipForward >>またはskipBackward <<を無効にしたり、カスタム処理のためにデフォルトの動作を削除したりできます。

指定できるアクション：

playPause
skipBackward
skipForward
left
right
select
back

PartialDisablingConfigurationオブジェクトを指定するとき、各アクションのデフォルト値はすべてfalseに設定されます。

注：backボタンを無効にした場合、影響を受けるのはSeekBar内の操作だけで、外部ナビゲーションやコンポーネント外で行われるその他の操作には影響しません。

コールバックプロパティ

onValueChange

スライド中につまみの値が変更されたときに呼び出されるコールバック。

クリップボードにコピーしました。

<SeekBar
  onValueChange={(value) => console.log("新しい値：", value)}
  currentValue={0}
  totalValue={1200}
/>

型 (value: number) => void

onSlidingStart

スライド操作が開始されたときに呼び出されるコールバック。D-Padでは、最初に左ボタンまたは右ボタンが押されたとき（キーダウン）にコールバックがトリガーされます。

クリップボードにコピーしました。

<SeekBar
  onSlidingStart={() => console.log("スライドが開始されました")}
  currentValue={0}
  totalValue={1200}
/>

型: () => void

onSlidingEnd

スライド操作が終了したときに呼び出されるコールバック。D-Padナビゲーションでは、左ボタンまたは右ボタンが解放されたとき（キーアップ）にトリガーされます。

クリップボードにコピーしました。

<SeekBar
  onSlidingEnd={() => console.log("スライドが終了しました")}
  currentValue={0}
  totalValue={1200}
/>

型 () => void | undefined

onRewindPress

ユーザーが早戻しアクションをトリガーしたときに呼び出されるコールバック。デフォルトでは、このボタンを押すと、コンテンツを早戻しする長押し操作がシミュレートされます。

RCUの早戻しボタン（<<）では、解放時（キーアップ）にトリガーされます。

クリップボードにコピーしました。

<SeekBar
  onRewindPress={() => console.log("早戻しが押されました")}
  currentValue={0}
  totalValue={1200}
/>

型 () => void

関連プロパティ：longPressIntervalDuration、stepMultiplierFactor、enableSkipForwardBackwardAcceleration。

onFastForwardPress

ユーザーが早送りアクションをトリガーしたときに呼び出されるコールバック。デフォルトでは、このボタンを押すと、コンテンツを早送りする長押し操作がシミュレートされます。

RCUの早送りボタン（>>）では、解放時（キーアップ）にトリガーされます。

クリップボードにコピーしました。

<SeekBar
  onFastForwardPress={() => console.log("早送りが押されました")}
  currentValue={0}
  totalValue={1200}
/>

型 () => void

関連プロパティ：longPressIntervalDuration、stepMultiplierFactor、enableSkipForwardBackwardAcceleration。

onPress

ユーザーがリモコンの選択ボタンを押したときに呼び出されるコールバック。

クリップボードにコピーしました。

<SeekBar
  onPress={(thumbValue) => console.log("押されました。位置：", thumbValue)}
  currentValue={0}
  totalValue={1200}
/>

型 (seekBarThumbValue: number) => void

onPlayPause

ユーザーがリモコンの再生／一時停止ボタンを押したときに呼び出されるコールバック。

クリップボードにコピーしました。

<SeekBar
  onPlayPause={(thumbValue) => console.log("再生／一時停止が押されました。位置：", thumbValue)}
  currentValue={0}
  totalValue={1200}
/>

型 (seekBarThumbValue: number) => void

onFocus

シークバーがフォーカスを受け取ったときに呼び出されるコールバック。

クリップボードにコピーしました。

<SeekBar
  onFocus={() => console.log("SeekBarにフォーカスが設定されました")}
  currentValue={0}
  totalValue={1200}
/>

型 () => void

onBlur

シークバーがフォーカスを失ったときに呼び出されるコールバック。

クリップボードにコピーしました。

<SeekBar
  onBlur={() => console.log("SeekBarからフォーカスが失われました")}
  currentValue={0}
  totalValue={1200}
/>

型 () => void

onSeekInteractionChange

D-Padによるシーク操作中に呼び出されるコールバック。

イベントオブジェクトには、シーク方向を示すdirectionプロパティが含まれています。

'forward'：右方向のD-Padナビゲーションによるシーク（最初の押下時）
'rewind'：左方向のD-Padナビゲーションによるシーク（最初の押下時）
'fast_forward'：右方向の長押しのD-Padナビゲーション
'fast_rewind'：左方向の長押しのD-Padナビゲーション
null：シーク操作が終了したとき（ユーザーがシーク後にD-Padを離したとき）に送信されます

クリップボードにコピーしました。

<SeekBar
  onSeekInteractionChange={(event) => {
    switch(event.direction) {
      case 'forward':
        console.log('早送りを開始します');
        break;
      case 'rewind':
        console.log('早戻しを開始します');
        break;
      case 'fast_forward':
        console.log('早送りしています');
        break;
      case 'fast_rewind':
        console.log('早戻ししています');
        break;
      case null:
        console.log('シーク操作が終了しました');
        break;
    }
  }}
  currentValue={currentPosition}
  totalValue={totalDuration}
  longPressDelay={300}
/>

型 (event: InteractionEventPayload) => void

イベントシーケンス

onSeekInteractionChangeコールバックは、D-Padの操作中に特定の順序で呼び出されます。

D-Padの右方向の例

最初の押下時（キーダウン）：event.direction = 'forward'
長押しした場合（longPressDelayの後）：event.direction = 'fast_forward'
解放時（キーアップ）：event.direction = null

D-Padの左方向の例

最初の押下時（キーダウン）：event.direction = 'rewind'
長押しした場合（longPressDelayの後）：event.direction = 'fast_rewind'
解放時（キーアップ）：event.direction = null

完全なイベントフロー：

長押し操作での完全なシーケンスは次のようになります。

クリップボードにコピーしました。

['forward' or 'rewind'] → ['fast_forward' or 'fast_rewind'] → [null]

短い押下（クイックタップ）でのシーケンスは次のようになります。

クリップボードにコピーしました。

['forward' or 'rewind'] → [null]

視覚的なカスタマイズプロパティ

markers

シークバーに表示するマーカーの配列。次の3種類のマーカーがサポートされます。

クリップボードにコピーしました。

// ReactNodeマーカー - カスタムコンポーネント
<SeekBar
  markers={[
    {
      position: 200,
      node: () => (
        <Text style={{color: 'white', marginTop: 20}}>説明</Text>
      ),
    },
    {
      position: 30,
      node: (
        <View style={{width: 15, height: 15, backgroundColor: 'red'}} />
      ),
    },
  ]}
  currentValue={0}
  totalValue={1200}
/>

// ポイントマーカー - バーを区切る色付きのポイント（通常は広告に使用）
<SeekBar
  markers={[
    { position: 30, pointColor: '#FF0000' },
    { position: 60, pointColor: '#00FF00' }
  ]}
  currentValue={0}
  totalValue={1200}
/>

// セグメントマーカー - バーを複数のセグメントに分割
<SeekBar
  markers={[
    { position: 30, type: 'break' },
    { position: 60, type: 'break' }
  ]}
  currentValue={0}
  totalValue={1200}
/>

// ポイントマーカーとセグメントマーカーの組み合わせ
<SeekBar
  markers={[
    { position: 20, pointColor: 'red' },
    { position: 40, type: 'break' },
    { position: 120, pointColor: 'red' },
    { position: 190, type: 'break' }
  ]}
  currentValue={0}
  totalValue={1200}
/>

型 ReactNodeMarker[] | BreakMarker[]

マーカーの種類

ReactNodeマーカー：複雑な視覚要素を表すカスタムReactコンポーネント。
ポイントマーカー：シークバーをセグメントに区切る色付きのポイント。通常は広告マーカーに使用されます。
セグメントマーカー：バーを複数の異なるセグメントに分割するブレークマーカー。

制限事項

ReactNodeマーカーをポイントマーカーやセグメントマーカーと組み合わせることはできません。
ポイントマーカーとセグメントマーカーは併用できます。
ポイントマーカーの間には少なくとも3%の間隔が必要です。
ポイントマーカーを配置できる位置は、SeekBarの合計幅の97%までです。

例1

ポイントマーカー

例2

セグメントマーカー

displayAboveThumb

シークバーのつまみの上にレンダリングするカスタムコンテンツ。レンダリング関数またはReactノードを使用できます。レンダリング関数は、{ mode, stepValue, multiplier, focused }の各プロパティを受け取ります。

クリップボードにコピーしました。

// 静的なコンテンツ
<SeekBar
    displayAboveThumb={
      <View
        style={{ alignItems: 'center', justifyContent: 'center', height: 50, width: 100 }}>
        <Text style={{color: 'white'}}>シークしています...</Text>
      </View>
    }
    currentValue={0}
    totalValue={1200}
/>

// 動的なコンテンツ
<SeekBar
  displayAboveThumb={({ mode, stepValue, multiplier }) => (
    <View
      style={{ alignItems: 'center', justifyContent: 'center', height: 50, width: 100 }}>
      <Text style={{color: 'white'}}>
        {`${mode} `}
        {stepValue * multiplier}s
      </Text>
    </View>
  )}
  currentValue={0}
  totalValue={1200}
/>

型 DisplayAboveThumbType | React.ReactNode（型定義セクションを参照）

displayBelowThumb

シークバーのつまみの下にレンダリングするカスタムコンテンツ。レンダリング関数またはReactノードを使用できます。

クリップボードにコピーしました。

<SeekBar
  displayBelowThumb={<Text>Live</Text>}
  currentValue={0}
  totalValue={1200}
/>

型 (() => React.ReactNode) | React.ReactNode

thumbIcon

つまみのアイコンを表すカスタムコンポーネント。レンダリング関数またはReactノードを使用できます。レンダリング関数は{ focused }プロパティを受け取ります。

クリップボードにコピーしました。

// 静的なアイコン
<SeekBar
  thumbIcon={<View style={{ width: 20, height: 20, backgroundColor: 'yellow', borderRadius: 10 }} />}
  currentValue={0}
  totalValue={1200}
/>

// 動的なアイコン
<SeekBar
  disabledWhenNotFocused={true}
  thumbIcon={({ focused }) => (
    <View style={{
      width: focused ? 24 : 20,
      height: focused ? 24 : 20,
      backgroundColor: focused ? 'yellow' : 'gray',
      borderRadius: 12
    }} />
  )}
  currentValue={0}
  totalValue={1200}
/>

型 ((props: ThumbIconProps) => React.ReactNode) | React.ReactNode

注：focusedコールバック引数を受け取る動的なアイコンを使用する場合は、適切なフォーカス動作のためにdisabledWhenNotFocused={true}を設定してください。

currentValueIndicatorColor

進行状況インジケーターの完了済み部分の色。静的な色を使用するか、フォーカス状態に基づいて色を返す関数を使用できます。

クリップボードにコピーしました。

<SeekBar
  currentValueIndicatorColor="#FF0000"
  currentValue={0}
  totalValue={1200}
/>

// フォーカスに基づく動的な色
<SeekBar
  disabledWhenNotFocused
  currentValueIndicatorColor={(isFocused) => isFocused ? '#FF0000' : '#888888'}
  currentValue={0}
  totalValue={1200}
/>

型 ColorValue | ((isFocused: boolean) => ColorValue)

barTrackColor

スライダーの未完了部分の色。

クリップボードにコピーしました。

<SeekBar barTrackColor="#626262" currentValue={0} totalValue={1200} />

型 ColorValue

segmentColors

セグメントのカラー構成。

クリップボードにコピーしました。

<SeekBar
  segmentColors={{
    0: { baseColor: "lightgreen", seekColor: "limegreen", progressedColor: "green", },
    1: { baseColor: "pink", seekColor: "brown", progressedColor: "red" },
  }}
  markers={[
    { position: 200, type: 'point', pointColor: 'red' },
    { position: 400, type: 'break' },
  ]}
  currentValue={0}
  totalValue={1200}
/>

型 SegmentColorsConfig

クリップボードにコピーしました。

interface SegmentColorsConfig {
  [index: number]: {
    baseColor?: ColorValue; // 操作が行われていないときの基本色
    seekColor?: ColorValue; // シークしている部分の色
    progressedColor?: ColorValue; // 進行した部分の色
  };
}

セグメントの色を構成するオブジェクト。特定のセグメントをインデックスで指定してカスタマイズできます。任意のセグメントに色を指定できます。必ずしも順番どおりに指定する必要はなく、カスタムの色が不要なセグメントはスキップできます。

注：アニメーションが有効な場合、segmentColorsのseekColorは適用されません。ブレークマーカーがない場合、バーにセグメントの色は適用されません。

使用例

黄色いセグメントの色

クリップボードにコピーしました。

  const segmentColors: SegmentColorsConfig = {
    2: {
      progressedColor: '#ffff00',
      seekColor: '#797926',
      baseColor: '#2e2e00',
    },
  };

赤いセグメントの色

クリップボードにコピーしました。

  const segmentColors: SegmentColorsConfig = {
    0: {
      progressedColor: '#ff0000',
      seekColor: '#811e1e',
      baseColor: '#432f2f',
    },
    1: {
      baseColor: '#727272',
    },
  };

スタイルプロパティ

barStyle

スライダーバーのスタイルオーバーライド。

クリップボードにコピーしました。

<SeekBar
  barStyle={{ height: 8, borderRadius: 4 }}
  currentValue={0}
  totalValue={1200}
/>

型 StyleProp<ViewStyle>

currentValueIndicatorStyle

進行状況インジケーターのスタイルオーバーライド。

クリップボードにコピーしました。

<SeekBar
  currentValueIndicatorStyle={{ backgroundColor: "#FF0000" }}
  currentValue={0}
  totalValue={1200}
/>

型 StyleProp<ViewStyle>

timeShiftIndicatorStyle

タイムシフトインジケーターのスタイルオーバーライド。

クリップボードにコピーしました。

<SeekBar
  timeShiftIndicatorStyle={{ backgroundColor: "#00FF00", opacity: 0.7 }}
  currentValue={0}
  totalValue={1200}
/>

型 StyleProp<ViewStyle>

サムネイルプロパティ

thumbnailStyle

サムネイルコンテナのスタイルオーバーライド。

クリップボードにコピーしました。

<SeekBar
  thumbnailStyle={{ borderRadius: 8, borderWidth: 2 }}
  currentValue={0}
  totalValue={1200}
/>

型 StyleProp<ViewStyle>

thumbnailImageSource

サムネイルプレビューの画像ソース。動的なソースを表すレンダリングプロパティを指定できます。

クリップボードにコピーしました。

// 静的なソース
<SeekBar
  thumbnailImageSource={{ uri: 'https://example.com/thumbnail.jpg' }}
  currentValue={0}
  totalValue={1200}
/>

// 動的なソース
<SeekBar
  thumbnailImageSource={(thumbValue) => ({ uri: `https://example.com/thumb_${thumbValue}.jpg` })}
  currentValue={0}
  totalValue={1200}
/>

型 ((thumbValue: number) => ImageSourcePropType) | ImageSourcePropType

thumbnailImageStyle

サムネイル画像のスタイルオーバーライド。

クリップボードにコピーしました。

<SeekBar
  thumbnailImageStyle={{ width: 120, height: 80 }}
  currentValue={0}
  totalValue={1200}
/>

型 StyleProp<ImageStyle>

thumbnailImageResizeMode

サムネイル画像のサイズ変更モード。

クリップボードにコピーしました。

<SeekBar
  thumbnailImageResizeMode="contain"
  thumbnailImageSource={{ uri: "https://example.com/thumbnail.jpg" }}
  currentValue={0}
  totalValue={1200}
/>

型 ImageResizeMode
デフォルト "cover"

thumbnailLabel

サムネイルに表示するラベル。動的なコンテンツを表すレンダリングプロパティを指定できます。

クリップボードにコピーしました。

// 静的なラベル
<SeekBar
  thumbnailLabel="Preview"
  thumbnailImageSource={{ uri: 'https://example.com/thumbnail.jpg' }}
  currentValue={0}
  totalValue={1200}
/>

// 動的なラベル
<SeekBar
  thumbnailLabel={thumbValue => `${thumbValue} sec`}
  currentValue={0}
  totalValue={1200}
/>

型 ((thumbValue: number) => string) | string

thumbnailLabelTextStyle

サムネイルラベルテキストのスタイルオーバーライド。

クリップボードにコピーしました。

<SeekBar
  thumbnailLabelTextStyle={{ color: "white", fontSize: 14 }}
  thumbnailLabel="Preview"
  currentValue={0}
  totalValue={1200}
/>

型 StyleProp<TextStyle>

thumbnailLabelContainerStyle

サムネイルラベルコンテナのスタイルオーバーライド。

クリップボードにコピーしました。

<SeekBar
  thumbnailLabelContainerStyle={{
    backgroundColor: "rgba(0,0,0,0.7)",
    padding: 4,
  }}
  thumbnailLabel="Preview"
  currentValue={0}
  totalValue={1200}
/>

型 StyleProp<ViewStyle>

操作タイミングのプロパティ

longPressIntervalDuration

D-Padの長押しアクションの間隔の長さ（ミリ秒）。方向キーを押している間、どのくらいの頻度でシークアクションを更新するかを制御します。デフォルトでは、リモコンから送信されるイベントの頻度と一致します。このデフォルト値のままにしておくことをお勧めします。

クリップボードにコピーしました。

<SeekBar longPressIntervalDuration={400} currentValue={0} totalValue={1200} />

型 number
デフォルト 200

例1

長押し時間： 200

例2

長押し時間： 400

longPressDelay

長押しアクションがトリガーされるまでの時間（ミリ秒）。D-Pad入力では、ユーザーが左方向キーまたは右方向キーを押し続けると長押しがトリガーされます。

クリップボードにコピーしました。

<SeekBar longPressDelay={500} currentValue={0} totalValue={1200} />

型 number
デフォルト 250

例1

長押し遅延： 200

例2

長押し遅延： 3000

keyDownThrottleDelay

キーダウンイベントをスロットリングするための遅延時間。キーがすばやく押されたときに、イベント処理が過剰に発生するのを防ぐために役立ちます。

クリップボードにコピーしました。

<SeekBar keyDownThrottleDelay={100} currentValue={0} totalValue={1200} />

型 number
デフォルト 0

animationDuration

enableAnimationsがtrueの場合のアニメーションの長さ（ミリ秒）。つまみと進行状況の遷移にかかる時間を制御します。長押し操作と早送りまたは早戻し操作のアニメーションが自然に感じられるように、longPressIntervalDurationとanimationDurationの両方に同じ値を設定することをお勧めします。enableAnimationsがfalseの場合は効果はありません。

クリップボードにコピーしました。

<SeekBar
  animationDuration={200}
  enableAnimations={true}
  currentValue={0}
  totalValue={1200}
/>

型 number
デフォルト 200

シーク動作のプロパティ

maxStepValue

長押し中に段階的にシークを加速する場合の最大ステップ値。加速中にシークのステップがどこまで大きくなるかを制限します。

クリップボードにコピーしました。

<SeekBar
  maxStepValue={50}
  currentValue={0}
  totalValue={3000}
  enableLongPressAcceleration
/>

型 number
デフォルト 160

stepMultiplierFactor

段階的に加速するシークのステップの乗算係数。加速中にどのくらいの速さでシーク速度を上げるかを決定します。この係数がstep値に乗算されます。enableLongPressAccelerationまたはenableSkipForwardBackwardAccelerationが有効な場合にのみ適用されます。

クリップボードにコピーしました。

<SeekBar
  stepMultiplierFactor={2}
  enableLongPressAcceleration
  currentValue={0}
  totalValue={1200}
/>

型 number
デフォルト 1

例

stepMultiplierFactor={1}：一定の加速 - 1倍→2倍→3倍→4倍...
stepMultiplierFactor={2}：高速な加速 - 時間とともに速度が2倍になります。1倍→2倍→4倍→8倍...
stepMultiplierFactor={3}：高速な加速 - 時間とともに速度が3倍になります。1倍→3倍→6倍→12倍...

stepMultiplierFactorInterval

ステップ乗数を増加させる時間間隔（ミリ秒）。D-Padの左方向または右方向の長押しによる加速中に、どのくらいの頻度でシーク速度を上げるかを制御します。速度の上昇率はstepMultiplierFactorによって処理されます。

クリップボードにコピーしました。

<SeekBar
  stepMultiplierFactorInterval={1500}
  stepMultiplierFactor={1}
  enableLongPressAcceleration
  currentValue={0}
  totalValue={1200}
/>

型 number
デフォルト 1000

lowerSeekLimit

シークバーの範囲内のシーク可能な最小値。この値より前の位置にシークすることを防ぎます。

クリップボードにコピーしました。

<SeekBar lowerSeekLimit={300} currentValue={0} totalValue={1200} />

型 number
デフォルト 0

upperSeekLimit

シークバーの範囲内のシーク可能な最大値。この値より後の位置にシークすることを防ぎます。

クリップボードにコピーしました。

<SeekBar upperSeekLimit={600} currentValue={0} totalValue={1200} />

型 number
デフォルト totalValue

enableLongPressAcceleration

長押し操作中の段階的な加速を有効にします。有効な場合、stepMultiplierFactorとstepMultiplierFactorIntervalの設定に基づいて、ステップ乗数が時間とともに増加します（1倍、2倍、3倍、4倍など）。step値には現在の乗数が乗算されます。これにより、左方向または右方向のキーまたはボタンを押し続けたときにシーク速度が上がります。

クリップボードにコピーしました。

<SeekBar
  enableLongPressAcceleration={true}
  stepMultiplierFactor={1}
  currentValue={0}
  totalValue={1200}
/>

型 boolean
デフォルト false

enableSkipForwardBackwardAcceleration

早送りまたは早戻し操作中の段階的な加速を有効にします。有効な場合、早送り（>>）ボタンまたは早戻し（<<）ボタンを連続して押すと、stepMultiplierFactorの設定に基づいてステップ乗数が増加します（1倍、2倍、3倍、4倍、5倍など）。step値には現在の乗数が乗算されます。

クリップボードにコピーしました。

<SeekBar
  enableSkipForwardBackwardAcceleration={true}
  stepMultiplierFactor={1}
  currentValue={0}
  totalValue={1200}
/>

型 boolean
デフォルト false

enableAnimations

シークバーのつまみと進行の動きのアニメーションを有効または無効にします。

trueの場合、シークバーは位置の変更をスムーズにアニメーション化し、timeShiftIndicatorStyleプロパティは適用されません。falseの場合、位置は即座に変更され、すべての視覚要素がレンダリングされます。

クリップボードにコピーしました。

<SeekBar enableAnimations={true} currentValue={0} totalValue={1200} />

型 boolean
デフォルト false

型定義

PartialDisablingConfiguration

クリップボードにコピーしました。

interface PartialDisablingConfiguration {
  back?: boolean; // 戻るアクションを無効にする
  playPause?: boolean; // 再生／一時停止アクションを無効にする
  skipBackward?: boolean; // 早戻しアクションを無効にする
  skipForward?: boolean; // 早送りアクションを無効にする
  right?: boolean; // 右方向アクションを無効にする
  left?: boolean; // 左方向アクションを無効にする
  select?: boolean; // 選択アクションを無効にする
}

InteractionEventPayload

クリップボードにコピーしました。

type InteractionEventPayload = {
  direction: "forward" | "rewind" | "fast_forward" | "fast_rewind" | null;
};

DisplayAboveThumbProps

クリップボードにコピーしました。

type DisplayAboveThumbProps = {
  mode: SeekMode; // 現在のシークモード
  stepValue: number; // シークの増分のステップ値
  multiplier: number; // 加速シークの現在の乗算係数
  focused: boolean; // シークバーにフォーカスがあるかどうか
};

SegmentColorsConfig

クリップボードにコピーしました。

interface SegmentColorsConfig {
  [index: number]: {
    baseColor?: ColorValue; // 操作が行われていないときの基本色
    seekColor?: ColorValue; // シークしている部分の色
    progressedColor?: ColorValue; // 進行した部分の色
  };
}

ThumbIconProps

クリップボードにコピーしました。

type ThumbIconProps = {
  focused: boolean; // シークバーにフォーカスがあるかどうか
};

SeekMode

クリップボードにコピーしました。

type SeekMode =
  | "forward" // 通常の早送り
  | "idle_forward" // 早送り中の状態だがアクティブにはシークしていない
  | "rewind" // 通常の早戻し
  | "idle_rewind" // 早戻し中の状態だがアクティブにはシークしていない
  | "fast_forward" // 加速早送り
  | "fast_rewind" // 加速早戻し
  | undefined;

用語集

以下のリストに、このドキュメントで使用される重要な用語を示します。

つまみ - 現在の値（currentValue）を設定するためにユーザーが使用できるSeekBarの対話型要素。デフォルトでは、つまみはSeekBarのcurrentValueの位置に配置されます。ユーザーがつまみを操作すると、それに応じてつまみの位置が変わります。

タイムシフト - つまみを使用して前後にスクラブする操作。

タイムシフトインジケーター - ユーザーがつまみを動かしたときに、currentValueと現在のつまみの位置とのギャップを表すインジケーター。

現在の値のインジケーター - SeekBarの完了済みの部分。現在の値を示します（進行状況インジケーター）。

シークサムネイル - 通常SeekBarのつまみの上に表示される、画像ベースのサムネイルコンポーネント。画像プレビューやサムネイルラベルなどのコンテンツを表示します。

マーカー - SeekBar全体に水平に配置されるカスタムのReactノードまたはビュー。マーカーの種類には、 ReactNodeマーカー（カスタムコンポーネント）、ポイントマーカー（色付きのポイント）、セグメントマーカー（ブレークマーカー）の3つがあります。

ポイントマーカー - シークバーをセグメントに分ける色付きのマーカー。広告マーカーによく使用されます。ReactNodeマーカーと組み合わせることはできません。

セグメントマーカー（ブレークマーカー）- バーを複数の異なるセグメントに分割するマーカー。ポイントマーカーと組み合わせることができます。

ReactNodeマーカー - 複雑な視覚要素を表すカスタムReactコンポーネント。ポイントマーカーやセグメントマーカーと組み合わせることはできません。

長押し - ユーザーがD-Padボタン（左方向または右方向）を押し続けると、加速シーク動作がトリガーされます。

早送り／早戻し - 長押し操作をシミュレートしてコンテンツをシークするリモコンボタン（>>と<<）。

D-Padナビゲーション - 左方向または右方向のD-Padコントロール。シークやつまみの移動に使用されます。

フォーカストラップ - 有効な場合、フォーカスがSeekBarから外れて左右に移動することを防ぎます。上下へのナビゲーションは可能です。

加速 - 長押しまたは連続スキップ操作中に段階的に速度が上がること。stepMultiplierFactorによって制御されます。

シーク制限 - 合計範囲内のシーク可能な位置を制限する境界（lowerSeekLimitまたはupperSeekLimit）。

セグメント - ブレークマーカーによって作成されたシークバーのセクション。各セクションには、カスタマイズ可能な色と視覚のプロパティがあります。

Last updated: 2025年9月30日