iter(g160): 滑块支持双滑块区间
This commit is contained in:
+5
-1
@@ -1,6 +1,6 @@
|
||||
# @ui-arch 组件库 Agent 文档(无图形版)
|
||||
|
||||
> 自动生成于 2026-10-26T08:02:08.033Z,数据源:各包 ua.manifest.json,勿手改。人类版文档站:apps/docs/index.html。
|
||||
> 自动生成于 2026-10-26T08:03:40.841Z,数据源:各包 ua.manifest.json,勿手改。人类版文档站:apps/docs/index.html。
|
||||
> 组件 = 普通函数,传 props 返回 DOM;状态用 signal 双向绑定:读 signal() 写 signal(v)。
|
||||
|
||||
## 快速上手
|
||||
@@ -197,6 +197,9 @@ const bio = signal(''); textarea({ value: bio, rows: 4, placeholder: '一句话
|
||||
- disabled:boolean | Signal<boolean> —— 禁用态:布尔直接置位,传信号则动态同步
|
||||
- showValue(默认 true):boolean —— 是否右侧显示当前值;缺省 true
|
||||
- marks:{ value: number; label?: string }[] —— 刻度标注:按值定位在轨道下方,label 缺省显示数值;纯装饰不进读屏(数值由原生 input 播报)
|
||||
- range(默认 false):boolean —— 双滑块区间模式:value 当下限、end 当上限,两拇指之间用强调色连成已选段
|
||||
- end:Signal<number> —— 区间上限信号;仅 range 模式使用,不传则组件内部维护
|
||||
- onRangeChange(回调):(low: number, high: number) => void —— 区间两端变更回调,参数已保证 low ≤ high(越界那一端会被压平)
|
||||
- onChange(回调):(value: number) => void —— 拖动回调
|
||||
|
||||
示例:
|
||||
@@ -213,6 +216,7 @@ const vol = signal(40); slider({ value: vol, min: 0, max: 100, step: 5, onChange
|
||||
4. 只想看拖动条不显示数字时传 showValue: false;需要自定义展示可自行读 signal
|
||||
5. 禁用场景传 disabled(布尔或信号),置灰且不可拖
|
||||
6. 需要在轨道下方标刻度(如 0 / 50 / 100 的档位含义)传 marks:[{ value, label }],按 min-max 换算百分比定位,容器宽度变化时自动跟随
|
||||
7. 要选数值区间就传 range: true 并给 end 信号:两条原生 range 叠在同一轨道,只有拇指可拖;拖下限越过上限会自动压平,回调走 onRangeChange(low, high)
|
||||
|
||||
现场演示:apps/docs/demo.html#sec-slider
|
||||
|
||||
|
||||
Reference in New Issue
Block a user