# Slider: スライダーUI

40まで塗られたレンジスライダーで、丸いつまみの上に値が表示されています。 動画テンプレート。Claude用コードをコピーするか、Subclipで編集できます。

Canonical URL: https://www.subclip.app/ja/motion-graphics-templates/remotion/slider

Preview video: https://subclipweb.subclip.app/motion-graphics-templates/v1/previews/motion-template-remotion-remocn-slider.mp4?v=3fe9df38d1

塗りの値とつまみの状態を設定できるすっきりしたレンジスライダーで、つまみの上に現在の値が表示されます。

- フレームワーク: Remotion
- カテゴリ: UI
- 再生時間: 4秒
- アスペクト比: 16:9 横向き
- コード: コードを取得（無料ログイン）：https://www.subclip.app/ja/motion-graphics-templates/remotion/slider

白い背景に幅320ピクセルのレンジスライダーがあり、40パーセントまで塗られ、待機状態の丸いつまみの上に値「40」が表示されています。テンプレートはこの状態を4秒間保ちます。コードでは、塗りが決められた値に沿って動き、ホバーやクリックでつまみが大きくなってリングが表示されるので、ドラッグしているように見えます。

値、つまみの状態（待機、ホバー、押下）、トラックの幅、値ラベルの表示に加えて、再生速度と背景も設定できます。設定画面のデモ、価格や数量の選択、アプリ動画の音量や明るさのコントロール、デザインシステムの紹介に使えます。

## 活用例

- 設定画面のデモ
- 価格と数量の選択
- アプリのコントロール動画
- デザインシステムの紹介

## 変更できる項目

- `speed`: 再生速度 (数値)
- `stageBackground`: 現場の背景 (色)

## このテンプレートの使用方法

1. Mac または Windows 用の Subclip をダウンロードします。このページのすべてのテンプレートはプリインストールされています。
2. [テンプレート]パネルを開き、[Slider]を選択してタイムラインにドロップします。
3. レイヤー設定のテキスト、色、タイミングを変更するか、AI エージェントに編集を依頼します。
4. ビデオをエクスポートするか、コードをダウンロードして独自のプロジェクトでテンプレートを使用します。

remocnのSliderをベースに作成: https://remocn.dev