Slider COMP 完全ガイド | 使い方・パラメータ解説【TouchDesigner】

記事更新の通知はXでアナウンス٩(๑❛ᴗ❛๑)
→ @maru6o6をフォロー

概要 📖 – ドラッグで値を入力する

Slider COMPは、マウスやタッチのドラッグ位置を u / v の連続値として取得し、panel value としてネットワーク内に渡すパネルコンポーネントです。Slider Type で U / V / UV の 3 モードを切り替え、Zone でドラッグ反応域を、Clamp で出力レンジを制御できます。

主な用途 🎯

水平 / 垂直スライダーとして 0–1 の連続値 (u または v) をユーザー入力で取得
2D XY パッドとしての利用 (Slider UV で u と v を同時に取得)
パラメータの GUI 制御 (Math CHOP 等を経由してエフェクト・ライト強度などにバインド)
VJ / ライブパフォーマンス用 UI の構築 (タッチパネルでの直感的な値変更)
カスタム制御パネルの中核入力部品として Container / Window COMP に組込み

データフロー 🔄

ユーザーのマウス / タッチドラッグ
 ↓
Slider COMP (Zone と Clamp で値域を整形)
 ↓
panel value (u / v)
 ↓
Panel CHOP で取得
 ↓
Math CHOP 等で正規化
 ↓
制御対象パラメータへ Export

Tips

初心者の方は、以下日本語書籍も手元にあると安心です。

リンク

まる。

実際の案件事例まで踏み込んで紹介されていて、効率よくスキルアップするなら必携の二冊です！

パラメータ解説 ⚙️

Slider Page 📋

Slider Type `.slidertype` 🎛️

スライダーの軸モードを指定するメニューパラメータ

項目	内部名	説明
Slider U	`.slideru`	u (横方向) Panel Value のみを追跡する水平スライダー
Slider V	`.sliderv`	v (縦方向) Panel Value のみを追跡する垂直スライダー
Slider UV	`.slideruv`	u と v の両方を同時に追跡する 2D XY パッド

現在値 🔢

Label .label 🏷️
– スライダー上に表示するラベルテキスト

Value .value0 🔢
– 1 次元スライダー (Slider U / Slider V) の現在位置
– 通常は 0.0–1.0 の範囲を取り、Clamp 設定でクリップされます

Value 1 .value1 🔢
– 2 次元スライダー (Slider UV) の v 軸現在位置
– Slider UV 時のみ意味を持ち、u は value0、v は value1 に格納されます

Zone (ドラッグ反応域) 📐

Zone Left .zonel ⬅️
– スライダーが反応する左端の位置 (0 = パネル左端、1 = パネル右端)
– 0–1 の範囲外も指定可能で、反応域をパネル外まで拡張できます

Zone Right .zoner ➡️
– スライダーが反応する右端の位置

Zone Bottom .zoneb ⬇️
– スライダーが反応する下端の位置 (Slider V / UV で使用)

Zone Top .zonet ⬆️
– スライダーが反応する上端の位置 (Slider V / UV で使用)

Clamp (出力レンジ制限) 🔒

Clamp U Low .clampul 🔻
– u 出力の最小値を 0 にクランプ
– Zone を 0–1 の外まで拡張した場合の負値カットに有効

Clamp U High .clampuh 🔺
– u 出力の最大値を 1 にクランプ

Clamp V Low .clampvl 🔻
– v 出力の最小値を 0 にクランプ (Slider V / UV)

Clamp V High .clampvh 🔺
– v 出力の最大値を 1 にクランプ (Slider V / UV)

Panel Page 🪟

表示・有効化 👁️

Display .display 👁️
– パネルの表示／非表示を切替
– 単純な ON/OFF 切替なら Opacity (Look Page) のほうが性能上有利です

Enable .enable ✅
– パネルへの全インタラクションを許可／禁止

Help DAT .helpdat 💡
– ロールオーバー時に表示するヘルプ文を格納した Text DAT のパス

Cursor `.cursor` 🖱️

パネル上のマウスカーソル形状を指定するメニューパラメータ

項目	内部名	説明
Normal Select	`.pointer`	標準矢印カーソル
Link Select	`.linkselect`	リンク選択カーソル (手のひら型)
Text Select	`.ibeam`	テキスト選択カーソル (I 字型)
Precision Select	`.cross`	精密選択用十字カーソル
Busy	`.busy`	処理中表示カーソル
Activate	`.activate`	クリック可能要素を示すカーソル
Invisible	`.invisible`	カーソルを非表示

Multi-Touch `.multitouch` 👆

マルチタッチ入力の取り扱いを指定するメニューパラメータ

項目	内部名	説明
Use Parent’s Multi-Touch Settings	`.mtouchparent`	親コンポーネントのマルチタッチ設定を継承 (ルート COMP では既定で有効)
Use Built-in Multi-Touch	`.mtouchyes`	最初のタッチをマウスクリックとして処理
Do Not Use Built-in Multi-Touch	`.mtouchno`	組込みマルチタッチ処理を無効化 (Multi Touch In DAT で独自処理する場合)

マウス制御 🖱️

Constrain Cursor .constraincursor 🔒
– カーソルがパネル内に入ったら外に出られないよう制約

Click Through .clickthrough ↘️
– オンですべてのマウスクリックを無視 (背面パネルにイベントを透過)

Use Mouse Wheel .mousewheel 🖱️
– マウスホイールイベントを取得

Mouse UV Buttons .uvbuttons 🖱️
– u / v Panel Value を更新するマウスボタンを指定
– Left / Middle / Right の 3 チェックボックスから複数選択可能

Relative UV .mouserel 🔄
– オンで u / v Panel Value がマウスの相対移動を反映 (絶対位置ではなく差分)

リサイズ・再配置 ↔️

Drag Edges to Resize .resize 📏
– パネルの 4 辺をドラッグでリサイズ可能にする 4 つのチェックボックス (Left / Right / Bottom / Top)

W Range / H Range .resizew ↔️
– リサイズ時の幅 (W) / 高さ (H) の最小・最大範囲を制限

Drag to Reposition .reposition 🖐️
– パネルやウィンドウをドラッグで再配置可能にするモードを指定 (Off / Window / Component)

X Range / Y Range .repositionx 📐
– Reposition が Component モードのとき、再配置可能な水平 (X) / 垂直 (Y) 範囲を制限

Scroll Overlay `.scrolloverlay` 📜

スクロールバー位置に対するパネルの追従挙動を指定するメニューパラメータ

項目	内部名	説明
Off	`.off`	スクロールバーがパネルに通常通り影響
Ignore	`.ignore`	スクロール時にパネルが移動しない (Depth Layer に従う)
Ignore and Draw Over	`.ignoreover`	スクロール時に移動せず、スクロールバーや兄弟パネルの手前に描画

Look Page 🎨

背景 🎨

Background Color .bgcolor 🎨
– 背景の RGB 値 (デフォルト: 黒)

Background Alpha .bgalpha 🌫️
– 背景のアルファ値 (透明度)

Background TOP .top 🖼️
– 背景に貼り付ける TOP のパス
– 画像・動画・グラデーション等をスライダー背景に利用可能

TOP Fill `.topfill` 📐

Background TOP の背景フィット方法を指定するメニューパラメータ

項目	内部名	説明
Stretch	`.off`	パネルサイズに合わせて引き伸ばし (アスペクト無視)
Fill Width	`.horizontal`	横幅に合わせて等比スケール
Fill Height	`.vertical`	縦幅に合わせて等比スケール
Fill Best	`.best`	短辺基準でフィット (余白あり)
Native Resolution	`.native`	TOP 本来の解像度のまま表示
Fill Outside	`.outside`	長辺基準でフィット (はみ出しあり)

TOP Smoothness `.topsmoothness` 🪶

Background TOP のビューア補間方式を指定するメニューパラメータ

項目	内部名	説明
Nearest Pixel	`.nearest`	最近傍ピクセル (拡大時にジャギーが目立つが正確)
Interpolate Pixels	`.linear`	線形補間 (新規 Panel COMP の既定値)
Mipmap Pixels	`.mipmap`	ミップマップ補間 (拡大縮小時のちらつき低減、32bit float では nearest に強制)

ボーダー 🟦

Border A / Border B .bordera 🎨
– 2 種類のボーダー色を定義 (RGBA 各色)
– 各辺の Border 設定で A / B / なしを選択して内外 2 列のボーダーを構築できます

Left / Right / Bottom / Top Border .leftborder 🟦
– 4 辺それぞれに対し 2px のボーダー色を指定
– 値は 0 (変更なし) / Border A / Border B のいずれか
– それぞれに Inside 版があり内側 2px のボーダーも独立指定可能

Border Over Children .borderover ⬆️
– ボーダーを子パネルより手前に描画

Composite `.composite` 🎛️

兄弟パネルとの合成方法 (詳細は Composite TOP と同じセマンティクス):

項目	内部名	説明
Over	`.over`	上に重ねる (アルファ合成、標準)
Under	`.under`	下に敷く
Inside	`.inside`	兄弟パネルのアルファ内側のみ描画
Outside	`.outside`	兄弟パネルのアルファ外側のみ描画
Add	`.add`	加算合成
Subtract	`.subtract`	減算合成
Multiply	`.multiply`	乗算合成

Disable Color / Opacity 🌫️

Disable Color .dodisablecolor 🚫
– Enable = Off 時に専用色を使用するかの切替 (チェックボックス + RGB + Alpha)

Multiply RGB by Alpha .multrgb ✖️
– RGB チャンネルにアルファを乗算 (pre-multiplied alpha)

Opacity .opacity 🌫️
– パネル全体の透明度を制御 (軽量な ON/OFF 用途は Display より Opacity 推奨)

Children Page 👶

Align `.align` 📐

子パネルのレイアウト方式を指定するメニューパラメータ

項目	内部名	説明
None	`.none`	自動レイアウトなし (手動配置)
Left to Right	`.horizlr`	横方向 1 行に左から右へ並べる
Right to Left	`.horizrl`	横方向 1 行に右から左へ並べる
Top to Bottom	`.verttb`	縦方向 1 列に上から下へ並べる
Bottom to Top	`.vertbt`	縦方向 1 列に下から上へ並べる
Grid Rows	`.gridrows`	グリッド状に行優先で並べる
Grid Columns	`.gridcols`	グリッド状に列優先で並べる
Match Network Nodes	`.nodes`	ネットワーク上のノード配置を反映

余白・スケール ↔️

Spacing .spacing ↔️
– 子パネル間のスペースを定義 (Align が None / Match Network Nodes 以外で有効)

Max per Line .alignmax 🔢
– 1 行 (1 列) に並べる子パネルの最大数 (Grid Rows / Grid Columns 系で有効)

Margin .margin 🔲
– パネル外周の余白 (4 辺それぞれピクセル指定)
– ウィンドウサイズに追従せず絶対値で扱われます

Scale / Offset .scale 🔍
– 子パネルを一括でスケール／オフセット
– Align / Justify が有効な場合は上書きされます

Justify Method `.justifymethod` 🎯

子パネルを Justify する単位を指定するメニューパラメータ

項目	内部名	説明
Individual	`.individual`	各子パネルを個別に Justify
Group	`.group`	子パネルをまとめてバウンディングボックス化し、その箱を Justify

Justify Horizontal `.justifyh` ↔️

子パネルの水平方向 Justify を指定するメニューパラメータ

項目	内部名	説明
Off	`.off`	水平方向の Justify なし
Left	`.left`	左寄せ
Center	`.center`	中央寄せ
Right	`.right`	右寄せ

Justify Vertical `.justifyv` ↕️

子パネルの垂直方向 Justify を指定するメニューパラメータ

項目	内部名	説明
Off	`.off`	垂直方向の Justify なし
Top	`.top`	上寄せ
Center	`.center`	中央寄せ
Bottom	`.bottom`	下寄せ

Fit `.fit` 📏

子パネルをパネル領域にフィットさせるメニューパラメータ (Justify を上書き)

項目	内部名	説明
Off	`.off`	Fit なし (Justify 設定が有効)
Fit Width	`.horizontal`	横幅にフィット
Fit Height	`.vertical`	縦幅にフィット
Fit Best	`.best`	短辺基準でフィット (アスペクト維持)

Crop `.crop` ✂️

パネル領域からはみ出した子パネルのクロップ動作を指定するメニューパラメータ

項目	内部名	説明
Off (Use Parent)	`.off`	親パネルの設定を継承
On	`.on`	はみ出し部分をクロップ
Never	`.never`	クロップせず、はみ出し描画を許可

スクロールバー 📜

Horizontal Scrollbar / Vertical Scrollbar .phscrollbar 📜
– 横／縦スクロールバーの表示モードを設定
– Off (非表示) / On (常時表示) / Automatic (子要素サイズ超過時のみ表示) の 3 択

Thickness .scrollbarthickness 📏
– スクロールバーの太さ (ピクセル指定)

実践アイデア 💡

Example 1: 音量フェーダーとしての Slider U 🎚️

Slider COMP (U) → Panel CHOP → Math CHOP → Audio File In CHOP (Volume)

Slider Type を U に設定した水平フェーダーで音量を操作し、Panel CHOP で u 値を取得後 Math CHOP で 0–1 を音量カーブにマッピングして Audio File In CHOP の Volume パラメータに Export する基本フローです。

Slider COMP を配置し Slider Type を Slider U に設定
Panel CHOP で Slider COMP の u チャンネルを取得
Math CHOP で 0–1 の入力をオーディオ用カーブ (例: x の 2 乗) にスケーリング
Math CHOP の出力を Audio File In CHOP の Volume パラメータに Export
実際にスライダーをドラッグして音量がリアルタイムに変化することを確認

Example 2: 2D XY パッドでパラメータ同時制御 🕹️

Slider COMP (UV) → Panel CHOP → 2 系統 Math CHOP → エフェクト 2 パラメータ

Slider Type を UV にして 2D パッドとして使い、Panel CHOP で u / v を同時に取り出し、それぞれ別の Math CHOP で正規化してエフェクトの 2 パラメータ (例: ブラー半径と彩度) を同時制御するパターンです。

Slider COMP の Slider Type を Slider UV に変更
Panel CHOP で u と v の 2 チャンネルを取得
Math CHOP を 2 系統用意してそれぞれ別レンジに正規化 (例: u → 0–50 px ブラー、v → 0.5–2.0 彩度)
Blur TOP / HSV Adjust TOP の対応パラメータに Export
1 つのスライダーで 2 つのエフェクトを同時調整できる UI が完成

Example 3: Clamp と Zone を使った中央デッドゾーン 🎯

Slider COMP (Zone 拡張 + Clamp) → Panel CHOP → 制御信号

Zone を 0–1 の外側まで拡張しつつ Clamp で 0–1 に丸めることで、スライダー中央付近に「無反応帯」を作る応用例。VJ パフォーマンスで誤操作を抑えたい場面に有効です。

Slider Type を Slider U、Zone Left を -0.2、Zone Right を 1.2 に拡張
Clamp U Low と Clamp U High を両方オンにして出力を 0–1 にクリップ
結果として両端 0.2 分のドラッグは値が変化しない「マージン」となる
中央部分でのみ素早い反応が得られ、誤タッチを軽減

Example 4: タッチパネル用 VJ コントローラの構築 📱

Container COMP → 複数 Slider COMP (Multi-Touch 有効) → Panel CHOP → エフェクトラック

Container COMP の中に複数の Slider COMP を並べ、それぞれ Multi-Touch を Use Built-in Multi-Touch に設定して 1 台のタッチパネルで同時操作可能な VJ コントローラを構築するワークフロー。

Container COMP を配置し、子要素として Slider COMP を 4–8 個並べる
Children Page の Align を Left to Right に、Spacing を適度に設定
各 Slider COMP の Multi-Touch を Use Built-in Multi-Touch に変更
Panel CHOP で全 Slider の値を 1 つの CHOP に集約
Math CHOP / Select CHOP で各値を取り出してエフェクトラックに分配

Panel Value 情報 📊

Slider COMP のドラッグ位置は Panel CHOP 経由で panel value として取得します。

COMP 固有情報 📦

num_children: コンポーネント内部の子 OP の総数
num_dats: 内部 DAT の数
num_chops: 内部 CHOP の数
num_tops: 内部 TOP の数
num_sops: 内部 SOP の数

汎用オペレータ情報 🔄

total_cooks: プロセス開始からのクック回数
cook_time: 最後のクック時間 (ミリ秒)
cook_frame: 最後にクックされたフレーム番号
warnings: 警告数
errors: エラー数

u: Slider U / UV モード時の横方向位置 (Zone で定義した範囲を 0.0–1.0 にマップ、Clamp の影響を受ける)
v: Slider V / UV モード時の縦方向位置 (0.0–1.0)
state: スライダーがクリック中かどうかのステート (0 / 1)
select: クリックで選択中かどうか (0 / 1)
lselect: ロックセレクト状態 (持続選択フラグ)
inside: マウスカーソルがパネル内にあるかどうか (0 / 1)

トラブルシューティング ⚠️

よくある問題と解決策 🔧

❌ Problem: スライダーをドラッグしても値が変化しない
✅ Solution:

Enable がオンになっているか確認 (Panel Page)
Mouse UV Buttons で適切なマウスボタン (通常は Left) がチェックされているか確認
Click Through がオンになっていると全クリックが透過するためオフに戻す

❌ Problem: 値が 0–1 の範囲外に出てしまう
✅ Solution:

Clamp U Low / Clamp U High をオンにして出力を 0–1 にクリップ
Zone Left / Zone Right が 0–1 の外側に拡張されていないか確認
後段の Math CHOP でクランプフィルタを噛ませる方法も有効

❌ Problem: Slider UV モードで v が動かない
✅ Solution:

Slider Type が Slider UV になっているか確認 (Slider U では v 不変)
Zone Bottom と Zone Top の値域が崩れていないか確認 (Bottom < Top である必要)
Clamp V Low / High の設定が出力を固定値に張り付かせていないか確認

❌ Problem: タッチパネルで複数 Slider を同時操作できない
✅ Solution:

各 Slider COMP の Multi-Touch を Use Built-in Multi-Touch に変更
ルート COMP 側の Multi-Touch 設定が継承されているか確認 (Use Parent’s Multi-Touch Settings の場合)
Multi Touch In DAT を併用する場合は組込みマルチタッチを Do Not Use Built-in Multi-Touch にして競合を避ける

参考資料 📚

その他 🔗

公式リソース 📖

この記事はLLMと共に内容を執筆、更新しています。
最新バージョンとの項目差異など、情報の不一致を見つけた心優しい方はXもしくはInsta、メールなどよりサイト管理者までご連絡ください😎

まる。

お仕事のご依頼はDM又はメールにて。
━━━━━━━━━━━━━━━━━
Python/Touchdesigner/M5Stackをこよなく愛すフルスタックエンジニア。
専門は生理心理学、趣味はヨガやサウナ、EMS電気風呂などヘルスケア全般。
脳波や筋電、心拍を中心とした生体情報のセンシング＆インタラクティブアートづくりがライフワーク。

普段はワントゥーテンという会社で空間演出エンジニアをしています。
リファラル採用お繋ぎできますので、我こそはという尖った方は経歴と希望職種添えてDMください(エンジニア以外、営業職等もOK)。
ご飯行きましょう。

↓日常垢
Instagram：＠malmal0v0