滑块 控件 可视化代码生成平台 · 输入增强控件
<div style="background:linear-gradient(135deg,#1e3a8a,#2563eb);color:#fff;border-radius:16px;padding:34px 32px;margin-bottom:24px;">
<div style="margin:0 0 6px;font-size:28px;font-weight:700;">滑块 控件</div>
<div style="margin:0;opacity:.9;">可视化代码生成平台 · 输入增强控件（1/27）</div>
</div>
<div style="background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:18px 22px;margin:16px 0;box-shadow:0 1px 3px rgba(0,0,0,.04);">
<b>用途：</b>在一个固定区间内拖动选取数值——音量、数量、进度、折扣比例等连续量。<br>
<b>存储：</b><code style="background:#0f172a;color:#e2e8f0;padding:2px 7px;border-radius:5px;font-size:13px;">int（长度留空；范围在字典配）。</code><br>
<b>列表/搜索：</b>列表显示数值；搜索为精确匹配。<br>
<b>适用：</b>需要"区间取值"而非手填数字的连续量。
</div>
<div style="margin:32px 0 12px;font-size:21px;font-weight:700;border-left:5px solid #2563eb;padding-left:12px;">控件解析（外观 · 行为交互 · 样式 · 数据）</div>
<div style="background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:18px 22px;margin:14px 0;">
<table style="width:100%;border-collapse:collapse;font-size:14px;">
<tr><th style="border:1px solid #e5e7eb;padding:8px 12px;background:#f1f5f9;width:96px;">维度</th><th style="border:1px solid #e5e7eb;padding:8px 12px;background:#f1f5f9;">说明</th></tr>
<tr><td style="border:1px solid #e5e7eb;padding:8px 12px;"><b>外观</b></td><td style="border:1px solid #e5e7eb;padding:8px 12px;">横向轨道 + 滑块手柄，左侧可显示当前数值标签；轨道带已选区间高亮色。</td></tr><tr><td style="border:1px solid #e5e7eb;padding:8px 12px;"><b>行为交互</b></td><td style="border:1px solid #e5e7eb;padding:8px 12px;">拖动滑块实时改变数值并同步数值标签；松手触发校验（范围/必填）。</td></tr><tr><td style="border:1px solid #e5e7eb;padding:8px 12px;"><b>样式</b></td><td style="border:1px solid #e5e7eb;padding:8px 12px;">轨道颜色、手柄大小、是否显示数值标签随主题或属性可调；可设最小值/最大值/步长。</td></tr><tr><td style="border:1px solid #e5e7eb;padding:8px 12px;"><b>数据</b></td><td style="border:1px solid #e5e7eb;padding:8px 12px;">存整数；范围由字典 min/max/step 约束（默认 0~100，步长 1）；超出区间被拦截。</td></tr>
</table>
</div>
<div style="margin:32px 0 12px;font-size:21px;font-weight:700;border-left:5px solid #2563eb;padding-left:12px;">属性面板（右侧）功能详解</div>
<div style="background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:18px 22px;margin:14px 0;">
<div style="font-weight:700;color:#0f172a;margin:14px 0 8px;">① 基础设置</div>
<table style="width:100%;border-collapse:collapse;font-size:14px;">
<tr><th style="border:1px solid #e5e7eb;padding:7px 10px;background:#f1f5f9;">字段</th><th style="border:1px solid #e5e7eb;padding:7px 10px;background:#f1f5f9;">说明</th></tr>
<tr><td style="border:1px solid #e5e7eb;padding:7px 10px;">字段名</td><td style="border:1px solid #e5e7eb;padding:7px 10px;">业务表列名，发布后锁定。</td></tr><tr><td style="border:1px solid #e5e7eb;padding:7px 10px;">标签</td><td style="border:1px solid #e5e7eb;padding:7px 10px;">表单与列表显示名。</td></tr><tr><td style="border:1px solid #e5e7eb;padding:7px 10px;">提示文案</td><td style="border:1px solid #e5e7eb;padding:7px 10px;">控件下方灰字提示。</td></tr><tr><td style="border:1px solid #e5e7eb;padding:7px 10px;">必填</td><td style="border:1px solid #e5e7eb;padding:7px 10px;">开启后未拖动取默认值是否拦截（视场景）。</td></tr>
</table><div style="font-weight:700;color:#0f172a;margin:14px 0 8px;">② 显示设置</div>
<table style="width:100%;border-collapse:collapse;font-size:14px;">
<tr><th style="border:1px solid #e5e7eb;padding:7px 10px;background:#f1f5f9;">字段</th><th style="border:1px solid #e5e7eb;padding:7px 10px;background:#f1f5f9;">说明</th></tr>
<tr><td style="border:1px solid #e5e7eb;padding:7px 10px;">进列表</td><td style="border:1px solid #e5e7eb;padding:7px 10px;">是否在列表显示该值。</td></tr><tr><td style="border:1px solid #e5e7eb;padding:7px 10px;">可搜索</td><td style="border:1px solid #e5e7eb;padding:7px 10px;">是否作为精确匹配搜索条件。</td></tr><tr><td style="border:1px solid #e5e7eb;padding:7px 10px;">排序权重</td><td style="border:1px solid #e5e7eb;padding:7px 10px;">在表单/列表的位置。</td></tr>
</table><div style="font-weight:700;color:#0f172a;margin:14px 0 8px;">③ 专属属性（dict）</div>
<table style="width:100%;border-collapse:collapse;font-size:14px;">
<tr><th style="border:1px solid #e5e7eb;padding:7px 10px;background:#f1f5f9;">字段</th><th style="border:1px solid #e5e7eb;padding:7px 10px;background:#f1f5f9;">说明</th></tr>
<tr><td style="border:1px solid #e5e7eb;padding:7px 10px;">min</td><td style="border:1px solid #e5e7eb;padding:7px 10px;">区间最小值，默认 0。</td></tr><tr><td style="border:1px solid #e5e7eb;padding:7px 10px;">max</td><td style="border:1px solid #e5e7eb;padding:7px 10px;">区间最大值，默认 100。</td></tr><tr><td style="border:1px solid #e5e7eb;padding:7px 10px;">step</td><td style="border:1px solid #e5e7eb;padding:7px 10px;">步长，默认 1（如 0.5、5）。</td></tr>
</table><div style="font-weight:700;color:#0f172a;margin:14px 0 8px;">④ 高级</div>
<table style="width:100%;border-collapse:collapse;font-size:14px;">
<tr><th style="border:1px solid #e5e7eb;padding:7px 10px;background:#f1f5f9;">字段</th><th style="border:1px solid #e5e7eb;padding:7px 10px;background:#f1f5f9;">说明</th></tr>
<tr><td style="border:1px solid #e5e7eb;padding:7px 10px;">启用 / 停用</td><td style="border:1px solid #e5e7eb;padding:7px 10px;">停用仅隐藏，不删列不丢数据。</td></tr>
</table>
</div>
<div style="margin:32px 0 12px;font-size:21px;font-weight:700;border-left:5px solid #2563eb;padding-left:12px;">演示</div>
<div style="background:#f8fafc;border:1px dashed #cbd5e1;border-radius:10px;padding:14px 16px;margin:12px 0;">
<span style="font-size:13px;color:#6b7280;display:block;margin-bottom:6px;">满意度（0~100，步长 5）</span>
<input type="range" min="0" max="100" step="5" value="60" style="width:100%;">
<div style="font-size:13px;margin-top:6px;color:#2563eb;">当前：60</div>
</div>
<div style="background:#eff6ff;border:1px solid #bfdbfe;color:#1e40af;border-radius:10px;padding:12px 16px;font-size:14px;margin:12px 0;">技巧：滑块适合"连续量 + 区间固定"的场景（如折扣、数量）；若需精确无区间，改用数字控件。步长 step 决定颗粒度。</div>
<div style="margin-top:36px;color:#6b7280;font-size:13px;text-align:center;">滑块 控件文档 · 随工具迭代更新</div>
页:
[1]