Skip to content

Slider 滑块

该组件是低代码平台中用于通过拖拽方式选择数值或数值范围的表单项,基于 Element Plus 的 <el-slider> 封装,支持单值/范围选择、步长控制、标记点、垂直布局及自定义提示格式,并深度集成表单容器(<el-form>)的数据绑定与校验体系。

基础属性

属性类型说明
最小值 minnumber滑块可选范围的起始值(默认 0
最大值 maxnumber滑块可选范围的结束值(默认 100
步长 stepnumber每次拖动或点击的增量(默认 1
是否开启范围选择 rangeboolean启用后可选择一个区间(如 [20, 80]
是否显示输入框 showInputboolean在滑块旁显示数值输入框(仅单值模式有效)
是否显示输入框控制按钮 showInputControlsboolean在输入框右侧显示增减按钮(需同时启用 showInput,默认开启)
是否显示间断点 showStopsboolean在轨道上显示步长对应的刻度点
是否显示提示信息 showTooltipboolean拖动时显示当前值的 Tooltip(默认开启)
格式化提示信息 formatTooltipstring自定义 Tooltip 显示内容,使用 ${data} 占位符代表当前数值(如 "${data}%"
是否垂直模式 verticalboolean滑块纵向排列
滑块高度 heightstring垂直模式下必须设置高度(支持 CSS 单位,如 200px10rem
获取标记样式函数 marksfunction返回 { [key: number]: { style?: object, label?: string } },用于在指定数值位置添加带样式的标记(key 必须在 [min, max] 范围内)
表单项基础配置包含标签宽度、布局控制等通用表单项设置(来自 formItemBaseDefine

📌 标记示例

js
return {
  25: { label: '偏低' },
  50: { style: { color: 'red' }, label: '中值' },
  75: { label: '偏高' }
}

高级属性

属性类型说明
表单项高级配置包含字段名(prop)、标签文本(label)等核心绑定配置(来自 formItemAdvDefine

事件

事件触发时机说明
change滑块值确认后发生变化时返回当前值(单值为 number,范围为 [number, number]