表单 · 8 / 21
Slider st-slider
滑块：内部透明原生 range 承载拖拽与键盘。min / max / step 转发原生属性，value 是运行时状态（el.value 读写，初始值用 default-value），input 拖动中实时派发、change 松手时派发。
基础用法与实时回显
默认范围 0–100、步进 1。初始值写 default-value，用户拖动时在 on:input 里把最新值写回页面 data；数值气泡会在拖动或聚焦时出现在拇指上方。
LIVE
default-value + on:input示例代码
<st-slider default-value="64" on:input="onVolume"></st-slider>
<span>volume = {{volume}}</span>
<script>
export default async () => ({
data: { volume: "64" },
proto: {
onVolume(e) {
this.volume = e.target.value;
},
},
});
</script>min / max / step
三个属性原样转发给内部 input[type=range]，可传小数步进。初始值仍用 default-value；范围不一致时记得让初始值落在区间内。
LIVE
min / max / step示例代码
<st-slider min="0" max="10" step="2" default-value="4" on:input="onTemp"></st-slider>
<st-slider min="50" max="150" step="10" default-value="80" on:input="onPrice"></st-slider>
<st-slider min="0" max="1" step="0.05" default-value="0.5" on:input="onOpacity"></st-slider>
<script>
export default async () => ({
data: { temp: "4", price: "80", opacity: "0.5" },
proto: {
onTemp(e) { this.temp = e.target.value; },
onPrice(e) { this.price = e.target.value; },
onOpacity(e) { this.opacity = e.target.value; },
},
});
</script>input 与 change 的区别
拖动过程中每个变化都派发 input（适合实时预览），松手或键盘提交时派发一次 change（适合提交表单、触发表单校验）。两者都是 bubbles + composed。
LIVE
on:input / on:change示例代码（实时预览 + 提交）
<st-slider default-value="50" on:input="preview" on:change="commit"></st-slider>
<script>
export default async () => ({
data: { value: "50" },
proto: {
preview(e) {
this.value = e.target.value; // 拖动中实时更新
},
commit(e) {
console.log("提交", e.target.value); // 松手 / 键盘提交
},
},
});
</script>color 语义与尺寸
color 接受 M3 角色名或 color 工具里的自定义变量名，联动激活轨道、拇指与数值气泡。尺寸类默认值全用 em：改宿主 font-size 全面板等比缩放，也可以直接设 width。
LIVE
color / font-size
error
success
tertiary
font-size: 12px
LIVE
attr:color示例代码
<st-slider color="error" default-value="30"></st-slider>
<st-slider style="font-size: 12px;" default-value="45"></st-slider>
<!-- color 是标签属性，可以随数据切换 -->
<st-slider attr:color="sliderColor" default-value="60"></st-slider>受控值：el.value 读写
value 是运行时状态，不是标签属性：JS 里用 el.value 读或写，页面里用 this.shadow.$("#id") 取到组件实例。初始值仍用 default-value；attr("value") / setAttribute("value") 不会生效。
LIVE
el.value示例代码（程序化写入）
<st-slider id="level" default-value="30" on:input="onLevel"></st-slider>
<st-button on:click="setLevel(80)">设为 80</st-button>
<script>
export default async () => ({
data: { level: "30" },
proto: {
onLevel(e) { this.level = e.target.value; },
setLevel(v) {
this.shadow.$("#level").value = v; // 运行时状态，不是 attr
this.level = String(v);
},
},
});
</script>disabled 与键盘
disabled 阻断拖拽与键盘并降到 0.38 透明度。可用时 Tab 聚焦（焦圈画在拇指上）、←/→ 步进、Home/End 跳到两端；键盘操作同样会派发 input 与 change。
LIVE
disabled / keyboard示例代码
<st-slider disabled default-value="65"></st-slider>
<st-slider default-value="35"></st-slider>属性
| 属性 | 类型 | 默认 | 说明 |
|---|---|---|---|
min / max / step | number | 0 / 100 / 1 | 取值范围与步进，转发内部原生 range |
default-value | string | 无 | 初始值，attached 时读取一次 |
color | M3 角色名 / 自定义变量名 | primary | 激活轨道、拇指与数值气泡的角色色 |
disabled | boolean | 无 | 0.38 透明度、阻断拖拽与键盘 |
value | 运行时状态（ofa data） | 0 | el.value 读写；不是标签属性，初始值用 default-value |
插槽 / 事件 / 注意
- 插槽：无。视觉全部由组件内部绘制。
- 事件：
input（拖动中实时）/change（松手、键盘提交），均 bubbles + composed。 - 键盘：Tab 聚焦、←/→ 步进、Home / End 到两端；焦点环画在拇指上。
- 默认尺寸
13.571em × 2.857em（190×40px 触控高度），轨道两端各内缩拇指半径，数值气泡在拖动/聚焦时显示。 - 不要用
attr:value/setAttribute("value")控制值；JS 读写一律走el.value。