iter(g160): 滑块支持双滑块区间
This commit is contained in:
+4
-1
@@ -200,6 +200,8 @@ const chipOn = { 全部: signal(true), 进行中: signal(false), 已完成: sign
|
||||
|
||||
// —— 滑块:音量与禁用态演示 ——
|
||||
const volume = signal(40);
|
||||
const priceLo = signal(200); // 区间滑块下限
|
||||
const priceHi = signal(800); // 区间滑块上限
|
||||
|
||||
// —— 数字输入:购买数量演示,与禁用态实例共用同一信号 ——
|
||||
const qty = signal(1);
|
||||
@@ -417,13 +419,14 @@ const content = h(
|
||||
section(
|
||||
'sec-slider',
|
||||
'滑块',
|
||||
'slider:原生 range 承载交互(含键盘 ←→),value 信号双向绑定,右侧可显示当前值。',
|
||||
'slider:原生 range 承载交互(含键盘 ←→),value 信号双向绑定,右侧可显示当前值;range 模式叠两条原生轨做双滑块区间。',
|
||||
h(
|
||||
'div',
|
||||
{ class: 'row' },
|
||||
slider({ value: volume, min: 0, max: 100, step: 5, onChange: (v) => toast.info(`音量 ${v}`) }),
|
||||
slider({ value: volume, disabled: locked }),
|
||||
slider({ value: volume, marks: [{ value: 0, label: '静音' }, { value: 50, label: '中' }, { value: 100, label: '最大' }], onChange: (v) => toast.info(`音量 ${v}`) }),
|
||||
slider({ value: priceLo, end: priceHi, range: true, min: 0, max: 1000, step: 50, onRangeChange: (a, b) => toast.info(`价格 ${a} ~ ${b}`) }),
|
||||
),
|
||||
),
|
||||
section(
|
||||
|
||||
Reference in New Issue
Block a user