WSlider 组件

A2UI Protocol JSON Schema

滑块组件，基于 WinDesignNext Slider 封装，用于在数值区间内通过拖动选取值，支持单值与范围模式，以及 modelValue 数据绑定和 action 事件响应。

基础用法

API

属性	类型	默认值	说明
component	string	WSlider	组件类型（必填）
modelValue	DataBindingValue	0	当前值，单值为数字，范围模式为数组
min	number | DataBindingValue	0	最小值
max	number | DataBindingValue	100	最大值
step	number | DataBindingValue	1	步长
disabled	boolean	false	是否禁用
range	boolean	false	是否为范围选择
showInput	boolean	false	是否显示输入框
showInputControls	boolean	true	输入框是否显示加减按钮
showStops	boolean	false	是否显示步长间断点
showTooltip	boolean	true	是否显示 tooltip
vertical	boolean	false	是否竖向模式
height	string	-	垂直模式高度
size	string	default	尺寸
marks	object	-	刻度标记
rangeStartLabel	string	-	范围模式左侧标签
rangeEndLabel	string	-	范围模式右侧标签
action	Action	-	值变化事件

path 支持说明

通用绑定格式见 path 数据绑定速查。

属性	path 支持	说明
modelValue	✅	滑块值双向绑定（单值或数组）
min	✅	动态最小值
max	✅	动态最大值
step	✅	动态步长
action.event.context[].value	✅	事件上下文可引用 dataModel
marks / range / showInput 等	❌	静态配置；动态变更请用 updateProp

modelValue 数据绑定

单值模式：

{
  "id": "slider_pain",
  "component": "WSlider",
  "min": 0,
  "max": 10,
  "modelValue": { "path": "/painLevel" }
}

范围模式：

{
  "id": "slider_dose",
  "component": "WSlider",
  "range": true,
  "min": 0,
  "max": 100,
  "modelValue": { "path": "/doseRange" }
}

配合 updateDataModel 设置初始值：

{
  "version": "v0.9",
  "updateDataModel": {
    "surfaceId": "main",
    "path": "/",
    "value": {
      "painLevel": 3,
      "doseRange": [20, 60]
    }
  }
}

action 定义

滑块值变化时触发，默认 type 为 change。

{
  "action": {
    "event": {
      "name": "onPainLevelChange",
      "type": "change",
      "context": [{ "key": "painLevel", "value": { "path": "/painLevel" } }]
    }
  }
}

配合 WForm 使用

[
  {
    "id": "form_item_pain",
    "component": "WFormItem",
    "label": "疼痛等级",
    "prop": "painLevel",
    "children": ["slider_pain"]
  },
  {
    "id": "slider_pain",
    "component": "WSlider",
    "min": 0,
    "max": 10,
    "modelValue": { "path": "/painLevel" },
    "action": {
      "event": {
        "name": "onPainLevelChange",
        "context": [{ "key": "painLevel", "value": { "path": "/painLevel" } }]
      }
    }
  }
]

---

事件处理

滑块变化事件

processor.onEvent((event) => {
  const { name, context } = event.message.userAction ?? {};
  if (name === 'onPainLevelChange') {
    console.log('疼痛等级已更新:', context?.painLevel);
  }
});

数据同步机制

WSlider 在拖动结束或输入确认后会自动将值同步到 dataModel，流程与 WInputNumber、WRate 一致：

1. 用户拖动滑块或修改输入框
2. 组件触发 change 事件
3. modelValue.path 指向的 dataModel 字段自动更新
4. 若配置了 action，同步派发 A2UI 客户端事件