# Slider: 滑块界面

填充到 40 的范围滑块，带圆形滑钮，数值显示在滑钮上方。 视频模板，可复制代码供 Claude 使用，或在 Subclip 中编辑。

Canonical URL: https://www.subclip.app/zh/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
- 类别: 界面
- 时长: 4 秒
- 纵横比: 16:9 横屏
- 代码: 获取代码（免费登录）：https://www.subclip.app/zh/motion-graphics-templates/remotion/slider

一个 320 像素宽的范围滑块位于白色画面上，填充到 40%，圆形滑钮处于静止状态，上方显示数值"40"。模板会把这个状态保持四秒。在代码中，填充会跟随设定的数值变化，悬停和按下时滑钮会变大并显示光环，看起来就像正在被拖动。

您可以设置数值、滑钮状态（静止、悬停或按下）、滑轨宽度以及是否显示数值标签，还可以调整播放速度和背景。适用于设置演示、价格或数量选择、应用视频中的音量或亮度控制，或设计系统展示。

## 适用场景

- 设置演示
- 价格与数量选择
- 应用控件视频
- 设计系统展示

## 可修改的内容

- `speed`: 播放速度 (数字)
- `stageBackground`: 场景周围的背景 (颜色)

## 如何使用此模板

1. 下载 Mac 或 Windows 的 Subclip。此页面上的每个模板均已预先安装。
2. 打开"模板"面板，选择 Slider 并将其放在时间线上。
3. 更改图层设置中的文本、颜色和时间，或要求 AI 代理为您编辑。
4. 导出视频，或下载代码以在您自己的项目中使用该模板。

基于 remocn 的 Slider 制作: https://remocn.dev