企业官网建设流程全解析

前阵子做项目，遇到一个挺常见的需求：在屏幕上做一个滑块，用来实时调材质的颜色、亮度或者透明度。第一反应是直接用引擎的 UMG Slider，拖起来也确实能用，但一旦想做成异形轨道、圆形旋转滑块、或者让滑块直接嵌进 3D 场景里的某个面板时，UMG 那套就有点僵硬了。后来我干脆把整个滑块逻辑搬到材质编辑器里，用 UE5 材质节点配合 Custom HLSL 来写，效果意外地好。这篇文章就是想把这段经验完整梳理一遍，从核心思路、节点拆解、蓝图交互到踩坑记录都聊透，给同样想用材质做滑块的朋友一条可以直接照做的路线。

这套方案的适用场景其实很明确：需要在屏幕上或者 3D 世界里做自定义样式的滑杆控件，滑块外观想要完全可控，轨道可以是直线、圆弧甚至不规则路径，并且希望交互过程中所有视觉反馈都在材质层实时完成。适合的人群是已经有一点 UE5 材质基础、想进一步提升蓝图层与材质层配合能力的开发者。我说的“滑块功能”，本质上就是让鼠标或手指在某个面板区域拖动时，材质会根据输入位置反馈出一个 0 到 1 之间的值，外面再套一层函数去驱动任意参数。

1. 材质滑块的整体设计与思路拆解

1.1 滑块的本质：输入位置到比例的映射

先别急着连节点，想清楚一件事：滑块不管长什么样，核心逻辑都是同一个，就是“输入位置”到“归一化数值”的映射。换言之，拖到最左边是 0，拖到最右边是 1，中间按比例线性过渡。只要把这个映射关系用材质表达出来，视觉上再画一个轨道和一个滑块头，就是一个完整体面的滑块功能。

在材质里做这个映射，最顺手的坐标系就是 UV 空间。每个材质默认都有 Texture Coordinate 节点，输出 0 到 1 的 UV 坐标，正好对应整个材质面板的横向和纵向比例。屏幕上的滑块区域如果铺满整个材质画布，那 UV.X 就等于鼠标在屏幕上的横向比例。鼠标位置当然是动态的，所以需要从蓝图传入一个二维向量，代表当前手指或鼠标在面板里的相对位置，这个数值再替换掉默认 UV 里的某个轴，就能得到“鼠标在材质里的坐标”。

听起来简单，但做起来有一个容易被忽略的点：面板长宽比例不一定是 1:1，而材质 UV 永远是 0 到 1 的正方形。如果直接把鼠标的屏幕坐标除以面板尺寸再传进材质，会导致横向和纵向的视觉拉伸不一致。换句话说，滑块头画出来是圆的，实际显示却是椭圆的。解决办法是传入面板的宽高比，或者在材质里自行做 Aspect Ratio 修正。这一步我建议放在材质里做，因为蓝图那边每次改布局都要同步修改参数，太容易忘记。

1.2 为什么选择材质而不是纯 UMG

纯 UMG 做滑块，优势是接入事件系统方便，鼠标按下、抬起都有现成的事件。但短板也很明显：第一，Slider 的外观定制能力有限，想做圆环滑块基本要自己拼一堆 Overlay；第二，滑块的运动插值逻辑如果要做得丝滑，得在 Tick 里写大量蓝图逻辑；第三，拖动的反馈比如按下时滑块放大、颜色变化，靠样式控制不够灵活。

材质方案把所有视觉反馈统统交给 GPU 去算：滑块头在什么位置、轨道被填充了多少比例、按下的时候有没有发光效果，全部由材质节点实时输出。蓝图层只负责两件事：监听输入事件、把输入坐标传给材质参数。这相当于把“怎么画”和“怎么交互”彻底解耦，后续换皮肤、加交互动效，都在材质层完成，蓝图几乎不用动。

还有一点是性能。材质滑块绘制基本上就是一次全屏 Draw Call，而 UMG 的每个 Slate 控件都有额外的 CPU 布局开销，滑块多的时候差距就出来了。当然，单一滑块性能差异可以忽略，但如果要做一个层级面板里几十个滑块同时存在，材质方案会更从容。

1.3 功能模块划分

既然要做一个完整的滑块功能，我建议把代码和材质拆成三个模块：

• 坐标输入模块：负责把鼠标或触摸的屏幕坐标转换到材质面板局部坐标，并做宽高比归一化。
• 滑块核心模块：在材质中计算轨道、滑块头、进度填充等视觉效果，同时输出当前值。
• 参数映射模块：将 0 到 1 的归一化数值映射到目标材质的实际参数范围，比如颜色的 HSV、亮度的 0 到 5 倍、透明度的 0% 到 100%。

这三个模块可以放在同一个材质里，也可以拆成多个材质配合参数集。我习惯的做法是滑块材质只负责视觉和输出 0 到 1 的当前值，真正去驱动其他材质参数的工作交给蓝图，好处是滑块组件可以复用，换个地方只需重新映射。

2. 核心材质节点解读

2.1 用 UV 坐标画轨道的底层逻辑

轨道说白了就是一个矩形区域。材质里画矩形最常用的思路是“距离判断”：用 UV 坐标减去矩形中心点，取绝对值，再和半宽半高比较，小于就显示轨道颜色，大于就显示透明或背景色。

节点路径大概是这样的：

• Texture Coordinate 输出 UV
• 用 ConstantBiasScale 把 UV 偏移到以中心为原点的坐标系，习惯上我减去 0.5，让坐标范围落在 -0.5 到 0.5。
• 用 ComponentMask 拆出 X 和 Y。
• 轨道宽度轨道的，比如要一个 0.7 宽、0.08 高的水平轨道，就判断 Abs(UV.X) < 0.35 且 Abs(UV.Y) < 0.04。
• 两个判断结果用 Multiply 连起来，得到轨道遮罩。
• 轨道颜色用 Lerp 混合：遮罩为 1 显示轨道色，为 0 显示背景色。

这段逻辑看起来繁琐，但其实只有 10 来个节点。这里有一个经验：不要用 Step 而要用 SmoothStep 做边缘，否则轨道会有明显的锯齿。实心轨道用 2 像素左右的 AA 就可以，数值上让轨道高度不是 0.04，而是 0.04 + 0.003，然后用 SmoothStep 在 0 到 0.003 之间过渡。

2.2 滑块头的圆形绘制与边界约束

滑块头一般是圆形。材质里画圆比画矩形更简单：计算 UV 到圆心的距离，小于半径就显示滑块头颜色。

不过这里有一个关键：滑块头的圆心 X 坐标应该等于当前滑块的进度值，也就是从蓝图传进来的 Progress 参数。Progress 的范围就是 0 到 1，直接映射到 UV.X，Y 固定在轨道中线。这样滑块头就能跟着拖动实时移动。

圆心在 UV 空间里定义为 (Progress, 0.5)。距离公式用节点连起来是：

• UV 向量减圆心向量，取 Dot 或直接用 Length 节点。
• 结果和半径比较，配合 SmoothStep 做圆边。

绘制本身不难，难的是边界约束。如果 Progress 是 0 到 1，滑块头会在轨道两端探出一半的半径，看起来像是滑出界了。解决方法是把 Progress 从材质表达式的 0 到 1 映射成圆心可移动范围内的实际值。假设滑块头半径是 R，轨道在 UV 空间里从 TrackMin 到 TrackMax，那圆心的 X 坐标应该是：

CenterX = TrackMin + R + (TrackMax - TrackMin - 2R) * Progress

这样在 Progress 为 0 时，滑块头刚刚贴合轨道左端内侧，为 1 时贴合右端内侧。这个公式我强烈建议直接记下来，因为你做任何带边界约束的滑块都会用到。我最初就是忽略这个映射，导致滑块拖到端点时头总是半截在外面，特别丑。

2.3 Custom 节点与纯蓝图节点的取舍

纯蓝图节点可以完成滑块视觉，但一旦要加更复杂的交互逻辑，比如检测点击位置是否落在滑块头上、计算拖拽偏移量，纯节点图就会变得非常绕。这时候用 Custom 节点写一段 HLSL 反而更清爽。

Custom 节点允许在材质里写一段自定义着色器代码，输入输出可以自定义。比如我写一个函数，输入 MouseUV 和 Progress，输出一个 float 表示“是否命中滑块头”：

float dist = distance(MouseUV, float2(Progress, 0.5)); float hit = 1.0 - smoothstep(0.04, 0.08, dist); return hit;

这里 0.04 是滑块头半径，0.08 是热区半径。命中判断不是用等于，因为鼠标是逐帧插值的，可能在快速拖动时某一帧刚好落在滑块头外部。稍微扩大热区范围，交互手感会宽容很多。

Custom 节点用起来要注意数据类型。材质编辑器里的 Custom 节点输入引脚默认是 float4，单个浮点要手动改成 float。还有输出类型也要设定，否则默认 float4 在某些版本的 UE5 里会报错。

2.4 材质参数集与动态材质实例的配合

滑块值要影响其他材质，有两条常见路线。一是直接建立多个 Dynamic Material Instance 并 Set Scalar Parameter Value；二是用 Material Parameter Collection 存一个公共参数，所有引用该 Collection 的材质自动同步。

我的建议是：滑块本体的视觉参数用 Material Parameter Collection，因为滑块材质需要频繁读取当前进度值；而滑块要控制的“目标材质”参数用 Dynamic Material Instance，因为不同物体可能需要不同的实例，避免互相污染。

举个例子，我做一个场景灯光调节滑块，滑块材质从 MPC_Global 里读取一个叫 SliderValue 的参数来绘制滑块位置，蓝图为滑块绑定的委托把值同时写入 MPC_Global 和场景中灯光的 Dynamic Material Instance，这样滑块绘制和灯光颜色同步变化，而且同一个滑块可以控制一组材质，只要它们共享同一个参数名。

3. 实操走一遍：从材质节点到蓝图交互

3.1 完整材质节点搭建步骤

下面是我实践过的一套完整节点连接，针对一个水平直线滑块。我把它当作模板来用，之后做圆形滑块都是在此基础上改。

第一步，新建材质，材质域选 User Interface，着色模型选 Unlit，混合模式选 Translucent。因为滑块是叠加在界面上的，不需要光照，也不需要深度测试。

第二步，加参数。需要三个动态参数：Progress（float，默认 0.5）、MouseUV（float2，默认 0.5, 0.5）、IsPressed（float，默认 0）。

第三步，搭轨道：

• Texture Coordinate 输出 UV，乘 1，减去 0.5，得到中心原点坐标。
• 连接轨道判断，视觉上用 (0.7, 0.08) 的矩形，用 Abs 加比较器和 SmoothStep 生成 Mask。
• 轨道底色用深灰，填充色用高亮，用进度值作为 Lerp 的 Alpha，控制填充范围。

填充范围这里有个技巧：轨道填充不是简单地把整条轨道都点亮，而是“从左端到当前进度位置”的部分点亮。做法是判断 UV.X 是否小于 Progress * 轨道宽度再减轨道左端偏移。用公式表达就是 FillMask = smoothstep(trackLeft, trackLeft + 0.002, UV.X) * step(UV.X, trackLeft + progress * trackWidth)。

第四步，画滑块头：

• 圆心坐标是 (trackMin + thumbRadius + (trackMax - trackMin - 2 * thumbRadius) * Progress, 0.5)。
• Length 计算距离，SmoothStep 生成圆。
• 按下状态时，半径放大 1.2 倍，同时加一圈发光，发光可以用 1 - smoothstep(radius, radius + 0.05, dist) 乘一个外发光颜色。

第五步，把轨道、填充、滑块头用 Add 或 Lerp 依次混合。从后往前画：先画背景色，再叠加轨道，再叠加填充，最后叠加滑块头。

完成之后，材质端就自给自足了：只要外部传进 Progress 和 MouseUV，这个材质就能画出完整滑块。

3.2 蓝图侧接收鼠标与触摸输入

蓝图侧的第一个任务是计算 MouseUV。

最实用的方法是使用 Player Controller 的 Get Hit Result Under Cursor by Channel，把结果里的 UV 坐标取出来。注意这个 UV 坐标是针对被射线命中的 UMG 控件或网格体的，如果用 3D Widget 组件来承载材质，UV 坐标就是相对于该 Widget 的局部 UV，刚好是我们需要的 0 到 1 范围。

如果不想依赖射线检测，也可以手动算：

• 获取鼠标位置。
• 获取滑块面板的屏幕坐标和尺寸，用 Slot 的 Get Desired Size 加 GetCached Geometry。
• 屏幕坐标减面板原点，再除以面板宽高，得到相对坐标。

触摸输入类似。UE5 的 Touch 事件里可以用 Event Touch Begin / Touch End / Touch Update。每个事件里调 Get Touch Index，然后同样走 Get Hit Result Under Touch 拿 UV。

我推荐在 Player Controller 里统一处理输入，而不是在 Widget 里挂事件，因为材质滑块要同时支持鼠标和触摸，Player Controller 层面一次写清楚，后面所有滑块复用同一套输入解析逻辑。

3.3 从输入到材质参数的传递链路

拿到 MouseUV 后，直接 Set Vector Parameter Value 写入材质实例的 MouseUV 参数。

但 Progress 不能直接等于 MouseUV.X，因为鼠标按下的位置不一定正好在滑块头上。比如用户点在轨道末尾，此时应该让滑块头瞬间跳过去，还是以当前滑块头为基准计算拖拽偏移？两种交互模式不同，我推荐使用“跳转式”：用户点到轨道哪个位置，滑块头就跳到哪个位置，后续按住拖动则跟随 MouseUV.X 变化。

跳转式在蓝图里实现最简单：

• 按下瞬间，直接把 MouseUV.X Clamp 到 0 到 1，写入 Progress。
• 拖动过程中，每帧更新 Progress = Clamp(MouseUV.X, 0, 1)。
• 松开时，不做额外处理，Progress 保持最后值。

之所以推荐跳转式，是因为它直观、代码量小，而且移动端触摸不精准时可以快速定位。如果要做精细的音量调节，再改成拖拽偏移式不迟。

拖拽偏移式稍微复杂一点：按下时要记录“滑块头位置与按下位置的偏移量 delta = Progress - MouseUV.X”，拖动时 Progress = Clamp(MouseUV.X + delta, 0, 1)。这个模式手感更细腻，适合精准控制。我实际项目中两种模式都有，用一个 Enum 切换，蓝图里同一个节点图就搞定了。

3.4 触摸拖动的插值与防抖

直接写入 MouseUV 会有一个问题：触摸扫描频率和设备帧率不完全同步，画面会出现肉眼可见的抖动。我的办法是在材质外部做一次插值。

在蓝图里维护一个 CurrentProgress，每次事件触发时不是直接覆盖，而是做：

CurrentProgress = FMath::Lerp(CurrentProgress, TargetProgress, 0.5f);

然后在 Event Tick 里继续向 TargetProgress 逼近，直到差值小于 0.001 才停止。

这样滑块会有轻微的惯性平滑，看起来会比较高级。要注意的是，Lerp 的 Alpha 值不能太大，否则跟手延迟会变得很明显。我实测 0.3 到 0.5 之间，手感比较舒服。另外插值不要在按下瞬间做，按下瞬间建议直接跳转，否则用户第一次点击会感觉滑不动。

还有一个防抖细节：MouseUV 的分量精度。直接用 Set Vector Parameter 传 float2，在材质里如果后续要拿去做精密的距离计算，可能会出现很小的数值跳动。可以把 MouseUV 乘以 1000 再传入，在材质里除以 1000，相当于用定点数方式平滑了一下。这个方法有点野路子，但在移动端有效。

4. 常见问题与排查技巧实录

4.1 滑块头变形，圆变成椭圆

这个坑我前后遇到了两次。第一次是在材质里画圆，忘记处理 Aspect Ratio，引擎默认 UV 空间是正方形，但实际控件是宽扁的，圆被横向拉伸成椭圆。

解法是在画圆之前，取 UV.X 乘以 (画布高度 / 画布宽度)，或者更简单：在 Custom 节点里用 viewport size 做修正：

float2 uv = TexCoord; uv.x *= View.ViewSizeAndInvSize.x * View.ViewSizeAndInvSize.y;

第二个场景是鼠标 UV 本身没有换算宽高比。有时候 Get Hit Result Under Cursor 返回的 UV 是 0 到 1，但它是基于整个 Viewport 的，和材质面板的宽高比不一致。这时候要在蓝图里拿面板的 Desired Size 去做除法修正。修正公式：

FVector2D CorrectedUV = RawUV; CorrectedUV.X *= PanelSize.Y / PanelSize.X;

这个修正在不同分辨率设备上尤其重要，很多手机竖屏分辨率比例差异巨大，不处理滑块必然变形。

4.2 拖动时数值跳变

跳变一般有两个原因。一个是按下瞬间直接取了当前 MouseUV.X 作为新的 Progress，但用户可能按在离滑块头较远的地方，导致值从 0.3 突然跳到 0.8。如果不想让用户一按就跳变，就需要切换到前面说的“拖拽偏移式”模式。

另一个原因是 Progress 写入材质后又被同一帧读取来做滑块头绘制，导致画面上滑块头总是比鼠标慢一帧。这个问题在低帧率设备上会被放大。解法是把输入事件处理放到 Pre Tick 或 Player Controller 的 Tick 里，确保进材质前值已经更新完。

我遇到过一个比较隐蔽的问题：Progress 用 Clamp 约束在 0 到 1，但材质里又做了浮点运算，例如 CenterX = Lerp(trackMin + radius, trackMax - radius, Progress)，如果 Progress 刚好是 0 或 1，因为浮点舍入误差，滑块头边缘会留下一条 1px 的缝隙。这种缝隙在深色背景下不容易发现，但浅色背景下特别明显。解决办法是轨道两端稍微延伸 0.002 的余量，让滑块头半径能盖住边界。

4.3 触摸在移动端没反应

桌面鼠标没问题，打包到 Android 后滑块不动，这个我排查过很多次。原因通常是项目输入设置里没有启用 Touch Interface。

在项目设置里的 Input 部分，把“Show Console On Four Finger Tap”之类的调试选项不去管它，关键是确定 Actor 或 Widget 的 Hit Test 是开启的。材质本身不会响应输入，如果用的是 3D Widget，需要在 Widget Component 的 Interaction 属性里勾选 Receive Hardware Input，并且把 Widget Space 设为 Screen。

还有一个非常坑的地方：Event Touch 在 Widget 里默认不会被触发，因为 UMG 的控件默认不接收触摸。需要在 Player Controller 的 Begin Play 里设置 Set Input Mode Game and UI，并且要确保触摸事件的 Hit Test 检测的通道能命中目标 Widget 组件。Channel 如果选的是 Visibility，而 Widget 材质有半透明区域，半透明区域默认是没法命中射线检测的，要注意把碰撞预设改成 UI 专用。

有个偏方是干脆不用 Event Touch，而是直接在 PlayerController 的 Tick 里轮询 Get Input Touch State，这样绕过了 UMG 的事件传递，可靠性非常高。缺点是无法感知 Touch Begin 的初始坐标，但这个坐标可以从 Touch Update 的 Touch location 推断出来，只要发一个标志变量记录“之前是否有 Touch 活跃”即可。

4.4 材质参数更新后不影响其他物体

滑块材质自己画得很欢，但场景里其他物体没反应，八成是参数写错了地方。常见错误是把参数写进了一个静态材质实例，而静态实例在运行时不支持运行时修改。

正确姿势是创建 Dynamic Material Instance，用 Create Dynamic Material Instance 节点从 Static Mesh 的 Material 创建，然后 Set Scalar Parameter Value。这个节点返回的就是运行时实例，直接修改它不会影响其他使用同一材质的物体，也不会在项目里生成临时资产残留。

另一个容易被忽略的坑是参数类型。Scalar 参数和 Vector 参数在材质里是不能互相转换的，如果你在材质节点里连了一个 Vector 参数，蓝图上必须有对应的 Set Vector Parameter Value，否则蓝图节点会报“can't find parameter”之类的警告，虽然不崩溃，但参数始终是默认值。用命名规范来区分比较好，我习惯在前面加前缀：所有标量统一 s_ 前缀，向量统一 v_ 前缀，颜色统一 c_ 前缀。这样材质里一眼就能看出参数类型，蓝图调用时也不容易搞错。

4.5 常见问题速查表

5. 扩展与应用：从基础滑块到复杂交互

5.1 材质动画残影效果叠加

滑块功能稳定之后，可以顺手做一个拖动残影，也就是热词里提到的“材质动画残影”。

在材质里保留一个上一次的 Progress 参数 PrevProgress，每次更新时把当前 Progress 存进去。然后画两个滑块头：一个位置是当前 Progress，另一个位置是 PrevProgress。PrevProgress 对应的滑块头透明度用时间衰减。

做到这点不需要改太多节点，在 Custom 里维护一个简单的衰减逻辑。如果你不想每一帧都从蓝图传两个值，可以在材质里用 Scene Texture 或者 Render Target 做历史帧缓冲区，不过成本略高。我更推荐在蓝图里维护一个数组，把最近 5 到 10 帧的 Progress 存进一个 Vector 参数，材质里依次画出来。效果就是滑块头拖过之后拖出一个小尾巴，动感十足。

5.2 半透明与穿透显示

滑块面板常和调色、调透明度功能搭配使用，半透明显示是绕不开的。材质混合模式选 Translucent 以后，要注意 DepthWrite 默认是关闭的，也就是说滑块材质不会写入深度，材质面片和场景物体重叠时会出现诡异的穿透。

如果你想让滑块在材质面板范围内正常显示，面板背后又能透出下层物体，需要把 Blend Mode 选 Translucent，并且在 Shading Model 里设置“Thin Translucent”，这样大半透明物体之间不会互相造成重度排序问题。同时勾选“Disable Depth Test”会让滑块在最上层，但随之而来的问题是滑动轨道的深浅层叠可能会错乱，需要单独区分轨道与控件背景的排序。

上层穿透看见下层这件事，在滑块里最常见的应用是做调色盘叠加预览：滑块区域半透明，下层背景是场景画面，拖动滑块时颜色在背景上实时混合，很有高级感。做法是把背景作为 Scene Color 采样，用 SceneTexture: PostProcessInput0 节点接入材质和滑块颜色做 Lerp。注意这个节点只能在 After PostProcess 的材质域里用，材质域选 Particle 或者 UI 时部分版本不稳定，建议做材质时加一个材质域存在 UI 还是 Post Process 的预编译开关。

5.3 双滑块与可变轨道形状

水平单滑块一旦跑通，双滑块就只是加一套参数的问题。我做过一个双滑块调色温的案例：滑块 A 控制红色增益，滑块 B 控制蓝色增益，两个滑块共用同一个材质空间，中间显示混合后的颜色。实现上需要两组 Progress 参数和两组 MouseUV，但是轨道绘制可以共用一个基础函数模块，用 append 把两组数据拼成 float4 传给 Custom 节点。

轨道形状方面我建议往圆形旋转滑块上扩展一下。圆形滑块的进度值不是沿着 X 轴，而是沿着圆周角。用 Atan2 节点把 UV 转成角度，然后归一化到 0 到 1，再和 Progress 比较。核心公式是：

float angle = atan2(uv.y - 0.5, uv.x - 0.5); float angle01 = (angle / 6.2831853) + 0.5; float masked = smoothstep(Progress - 0.01, Progress, angle01);

这个公式可以做出 360 度圆环滑块，松开后颜色渐变跟随角度。要注意的是 Atan2 在 -PI 到 PI 之间跳变，如果起始角度不在右边，需要做偏移处理，否则滑块会在初始点附近出现非连续跳变。

5.4 蓝图接口传参与模块复用

热词里提到的“UE5 蓝图接口使用”很适合搭配材质滑块使用。我把滑块封装成一个蓝图接口 BPI_Slider，里面定义了一个事件 OnSliderValueChanged(float Value)。任何控件或 Actor 实现了这个接口，就能被滑块组件绑定。

整个链路就很清爽了：滑块材质的 Progress 变化后，蓝图组件广播 OnSliderValueChanged，外部系统只要监听这个事件就能实时拿到 0 到 1 的值，再各自映射到材质参数、灯光强度、音量和角色属性等。这样做的好处是滑块本身完全不知道自己要控制什么，只用关心画得漂不漂亮和数值准不准，至于数值出去以后是调一盏灯的颜色还是调一个角色的发丝透明度，完全由监听方决定。

实测下来这个结构很有扩展性，我后来把同一个滑块控件用来控制风场强度、天气粒子密度和瀑布颜色，全部只改监听端逻辑，滑块材质和输入蓝图一份都没动。

5.5 一次完整扩展案例：颜色选择器

以材质滑块为基础做 RGB 颜色选择器是个很典型的总结性案例。三个滑块分别控制 R、G、B，每个滑块共用一套材质逻辑，但在最终合成的时候，用三个参数把三个滑块的值合成一个颜色向量。

材质部分：每个滑块材质需要传入 ChannelIndex 这个参数，表示自己是第几个滑块。在 Custom 里根据 ChannelIndex 决定输出颜色的哪一位：

float3 currentColor; if (ChannelIndex < 0.5) currentColor = float3(Progress, 0.0, 0.0); else if (ChannelIndex < 1.5) currentColor = float3(0.0, Progress, 0.0); else currentColor = float3(0.0, 0.0, Progress);

滑块头的颜色也可以根据 ChannelIndex 变化，这样三个滑块一眼就能区分通道。

蓝图部分：三个滑块共用一个输入处理蓝图类，实例化三次，分别绑定到一个三维数组的三个元素上。变化时重新合成 FLinearColor 并应用到目标材质的色参数上。

这个案例最好的一点是，它把“单滑块→多滑块→混合输出”整条链路都串起来了，做完你再去理解引擎里任何 Slider 组件背后的逻辑，都会觉得很清楚，因为核心就是输入映射加参数传递这一套。

6. 写在最后的一点经验

实际操作里，我发现很多人把滑块做复杂了。材质滑块的核心永远是那一行映射公式，视觉只是附加值。先把“输入坐标转进度”这条路打通，再慢慢往上面叠加轨道样式、滑块头特效、插值平滑，每一步都可以独立测试。还有一个小建议：材质参数命名一定要看得到类型，s_Progress、v_MouseUV 这种前缀能省掉很多调试时间。最后分享一个我自己的习惯：滑块材质里的关键公式都加上注释节点，哪怕是不起眼的常量也写清楚它的语义，比如 0.04 是滑块半径还是热区半径，半年之后再翻项目就会发现这些注释有多救命。