ToolJet Range Slider 组件完全解析属性配置、样式定制、暴露变量与源码实现【免费下载链接】ToolJetOpen-source foundation of ToolJet AI - the enterprise app generation platform for internal tools, dashboards, business applications, workflows and AI agents. Build visually, from a prompt, or from Claude Code, Codex and Cursor over MCP 项目地址: https://gitcode.com/GitHub_Trending/to/ToolJetRange Slider 是 ToolJet 低代码画布中用于数值选择的核心交互组件常见于过滤条件、设置选项、阈值调节等内部工具场景。本篇基于官方文档 Range Slider结合前端源码 rangeslider.js、rangesliderV2.js 与渲染实现 RangeSlider.jsx、RangeSliderV2.jsx完整讲解其属性、事件、暴露变量、样式与设备控制并剖析其底层 rc-slider 渲染机制与双版本Legacy / V2差异帮助读者在实际搭建 ToolJet 应用时准确配置、动态控制该组件。组件概述单值滑块与双把手区间Range Slider 广泛应用于各类 UI 场景其核心用途之一是对内容进行过滤、探索与关联内容筛选并大量出现在控制面板与设置选项中。该组件支持一种关键的形态切换——Two handles双把手启用后滑块由单把手变为两个可拖拽把手用户可以选择一个数值区间而非单个值。从源码结构看ToolJet 仓库中实际并存两套实现Legacy 版组件注册名为RangeSliderLegacy显示名为 Range Slider (Legacy)渲染实现位于 RangeSlider.jsx其属性面板正是官方文档描述的 Minimum value / Maximum value / Value / Two handles 四属性模型V2 版组件注册名为RangeSlider即当前画布中的 Range Slider渲染实现位于 RangeSliderV2.jsx在 Legacy 基础上增加了标签、步进、刻度标记、加载态、禁用态与更细的样式控制。两者均在 widgets/index.js 中统一注册导出。下文以文档描述的属性体系为主线并对照源码给出默认值与扩展能力。Properties核心属性与默认值官方文档定义的最小属性集如下表完整继承自 range-slider.md属性说明Minimum value设置滑块的最小值字段接受任意数值Maximum value设置滑块的最大值字段接受任意数值Value设置组件加载时的默认值可结合数据与业务需求做预填Two handles启用后滑块拥有两个拖拽把手用于定义一段取值区间而非单个值对照 Legacy 配置源码 rangeslider.js各属性对应的内部键名与默认值为文档属性内部键名类型默认值Minimum valueminnumber0Maximum valuemaxnumber100Valuevaluecode支持{{ }}表达式50Two handlesenableTwoHandletogglebooleanfalse几个值得注意的实现细节Value 的类型value在 Legacy 中被声明为 code 类型且校验 schema 允许number或number[]数组这与双把手时值是一个数组的行为一致表达式支持min、max、value的 definition 中分别写作{{0}}、{{100}}、{{50}}即三者都支持 fx 表达式动态绑定例如可以让 Max value 跟随某个查询结果渲染逻辑RangeSlider.jsx 中用toArray (data) (Array.isArray(data) ? data : [data, max])将单值补全为区间并在enableTwoHandle为真时渲染带range属性的 rc-sliderSlider否则渲染单把手 Slider——这正是文档所说Two handles 从单值切换为区间的底层实现。V2 新增属性当前画布中的 Range SliderV2在 rangesliderV2.js 中将Two handles布尔开关升级为Slider type单选enableTwoHandle取值为slider/rangeSlider并新增以下属性属性说明默认值Label组件旁显示的标签文本LabelMin value / Max value最小 / 最大值对应 Legacy 的 Minimum / Maximum value0/100Default value单滑块模式下的初始值50Default start value双把手模式下的起始值仅 Range slider 模式显示50Default end value双把手模式下的结束值仅 Range slider 模式显示80Step size拖拽步长源码中传给 rc-slider 的step为 0 时回退为11Set marks刻度标记JS 表达式配置形如[{label: 25%, value: 25}, {label: 50%, value: 50}, {label: 75%, value: 75}]见 definitionShow loading state加载态开关falseDisable禁用态开关falseTooltip / Tooltip 格式悬停提示文本支持 Plain text / Markdown / HTML 三种格式plainText其中value、startValue、endValue通过conditionallyRender依据 Slider type 的取值决定显示哪一个即单滑块只显示 Default value区间模式则显示 Start/End 两个值这是文档中 Value 用于预填 能力在 V2 中更细化的体现。事件与动作从无 CSA到六个可控动作官方文档明确指出Range Slider目前没有任何 CSAComponent-Specific Actions组件特定动作用于控制该组件。这一描述与 Legacy 配置吻合——rangeslider.js 中未声明actions数组。但 V2 版本补齐了这一能力。onChange 事件两个版本都声明了onChange事件显示名 On change。从源码看它由 rc-slider 的onAfterChange回调触发即拖拽松手一次交互完成时触发而非每帧变化都触发拖拽过程中的每次数值变化则通过onChange回调持续写入暴露变量value见 RangeSlider.jsx 的onSliderChange/onRangeChange。典型用法是在 Button 的 onclick 中读取{{components.rangeslider1.value}}执行查询或跳转。V2 的 CSA 动作rangesliderV2.js 声明了六个动作均可在事件处理器中通过{{components.rangeslider1.xxx()}}调用动作参数作用setValueValue程序化设置单滑块值并触发 onChangesetRangeValueMin value、Max value程序化设置双把手区间并触发 onChangereset无复位到属性面板配置的默认值setDisableValuetoggle默认{{false}}切换禁用态setLoadingValuetoggle默认{{false}}切换加载态显示 SpinnersetVisibilityValuetoggle默认{{false}}切换可见性这些动作在组件内的具体实现可见 RangeSliderV2.jsxsetValue/setRangeValue会同步更新本地 state、写回暴露变量value并调用fireEvent(onChange)从而保证JS 改值与用户拖拽走同一套数据流。Exposed Variables如何读取滑块值文档定义了唯一的暴露变量变量说明访问方式value当 Two handles关闭时持有一个值对象开启时持有一个数组使用 JS 动态访问{{components.rangeslider1.value}}或{{components.rangeslider1.value[1]}}取区间上界源码印证了这一行为RangeSlider.jsx 中单把手模式调用setExposedVariable(value, singleHandleValue)写入数值双把手模式调用setExposedVariable(value, twoHandlesArray)写入[start, end]数组因此双把手场景下value[0]为下界、value[1]为上界。V2 进一步扩展了暴露变量集合rangesliderV2.jsvalue当前值数值或[start, end]数组label标签文本isVisible/isDisabled/isLoading可见性、禁用态、加载态的只读状态量方便在事件逻辑中做条件判断。GeneralTooltip在General折叠区中可以以字符串格式设置 Tooltip鼠标悬停在组件上时该字符串即作为提示浮层显示。V2 中该能力进一步升级为Tooltip 格式开关 文本字段的组合格式可选plainText/markdown/html文本字段支持 fx 表达式动态生成提示内容rangesliderV2.js。Devices多端可见性文档中 Devices 部分定义了两个开关属性说明期望取值Show on desktop控制组件在桌面端视图中是否可见可用开关按钮直接设置或点击fx输入逻辑表达式动态配置Show on mobile控制组件在移动端视图中是否可见同上两个版本配置中others段均声明了showOnDesktop/showOnMobile两个 toggle且初始 definition 均为showOnDesktop: true、showOnMobile: false——即新拖入的滑块默认只在桌面端显示需要在 Devices 中显式打开移动端。Styles颜色与可见性文档列出的样式项样式说明Line color输入十六进制颜色设置滑块**轨道track 底轨**的默认颜色Handle color输入十六进制颜色设置滑块**把手handle**的颜色Track color输入十六进制颜色设置滑块轨道上已激活部分的颜色Visibility以编程方式控制滑块可见性默认值为{{true}}文档同时提示凡字段旁带 fx 按钮的属性均可被编程配置。对照 Legacy 源码rangeslider.js三个颜色样式的内部键为lineColor/handleColor/trackColor默认色值均为#375FCFvisibility为 code 类型、默认{{true}}。在 RangeSlider.jsx 中可以看到它们的映射关系railStyle底轨取lineColortrackStyle激活段取trackColorhandleStyle把手取handleColor。visibility则在容器上同时作用于display与aria-hidden实现视觉与无障碍层面的隐藏。V2 的样式面板更细rangesliderV2.js除 Track默认#E4E7EB、Accent激活段、Handle默认#FFFFFF外还增加了Handle border、Marker label刻度文字颜色、标签颜色 / 字号 / 对齐side / top与左右方向、容器 Padding 等。源码实现剖析基于 rc-slider 的渲染两个版本都基于rc-slider库import Slider from rc-slider。单/双把手的切换在 JSX 层是二选一渲染enableTwoHandle为真V2 中为rangeSlider时渲染带range属性的Slider并传入defaultValue{[start, end]}否则渲染单值Slider。拖拽中的实时数值通过onChange写入 state 与暴露变量交互结束onAfterChange再触发画布级onChange事件形成实时更新变量、松手触发事件的双层数据流。表单重置集成两个组件都通过useFormClear来自 FormSignalContext注册了清理回调当所在 Form 触发清空信号时单滑块被重置为min双把手则重置为[min, min]RangeSlider.jsx。这意味着把 Range Slider 放入 Form 容器内后表单的 Reset 行为会自动覆盖其值——在搭建查询条件 重置类界面时无需额外手写清理逻辑。V2 的刻度、步进与悬停数值V2 版把Set marks属性一个对象数组表达式经reduce转换为 rc-slider 的marks参数其中会过滤掉value超过max的刻度点并剥离 label 中的%字符RangeSliderV2.jsxStep size直接映射为step{stepSize || 1}。此外V2 用handleRender给把手套了一层OverlayTrigger拖拽过程中在把手上方浮出当前数值 Tooltip让区间选择时用户无需盯住刻度读值。加载态时整个滑块区域被 Spinner 替换禁用态则通过pointerEvents: none与半透明样式锁定交互。值变更的受控同步V2 中有一个值得注意的受控同步逻辑RangeSliderV2.jsx 监听value、enableTwoHandle、startValue、endValue的变化并在非首渲染时执行resetFn()同时把resetFn本身作为暴露变量reset写入——这使得 fx 表达式修改 Default value、或 JS 调用reset()时画布上的滑块会回到属性面板定义的初始区间且不会在初次渲染时产生多余的变量写入isInitialRenderref 用于排除首次挂载。实际应用建议过滤器场景用双把手模式 {{components.rangeslider1.value[0]}}/value[1]作为查询参数配合onChange事件触发查询刷新是典型的区间过滤搭建方式动态上下界min/max/value支持 fx可以把上下界绑定到查询返回的数据如价格区间的 min/max让滑块随数据自适应编程控制在 V2 中优先使用setValue/setRangeValue/reset/setDisable/setLoading/setVisibility六个动作组合事件逻辑若组件仍为 Legacy 版本无动作只能通过修改value表达式或事件间赋值来间接控制多端应用默认仅在桌面端可见面向移动端的内部工具需手动打开 Show on mobile或用 fx 表达式按会话状态动态控制。综上ToolJet 的 Range Slider 以单值 / 区间双形态覆盖数值选择类交互属性与样式体系在文档层面保持了最小可用集而在源码层面Legacy 与 V2 两套配置和渲染实现提供了步进、刻度、标签、加载/禁用/可见性动作等完整能力。读者可先按 官方文档 配置基础属性再对照本文列出的源码文件路径深入核对默认值与行为边界。【免费下载链接】ToolJetOpen-source foundation of ToolJet AI - the enterprise app generation platform for internal tools, dashboards, business applications, workflows and AI agents. Build visually, from a prompt, or from Claude Code, Codex and Cursor over MCP 项目地址: https://gitcode.com/GitHub_Trending/to/ToolJet创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 ToolJet Range Slider 组件完全解析：属性配置、样式定制、暴露变量与源码实现
ToolJet Range Slider 组件完全解析属性配置、样式定制、暴露变量与源码实现【免费下载链接】ToolJetOpen-source foundation of ToolJet AI - the enterprise app generation platform for internal tools, dashboards, business applications, workflows and AI agents. Build visually, from a prompt, or from Claude Code, Codex and Cursor over MCP 项目地址: https://gitcode.com/GitHub_Trending/to/ToolJetRange Slider 是 ToolJet 低代码画布中用于数值选择的核心交互组件常见于过滤条件、设置选项、阈值调节等内部工具场景。本篇基于官方文档 Range Slider结合前端源码 rangeslider.js、rangesliderV2.js 与渲染实现 RangeSlider.jsx、RangeSliderV2.jsx完整讲解其属性、事件、暴露变量、样式与设备控制并剖析其底层 rc-slider 渲染机制与双版本Legacy / V2差异帮助读者在实际搭建 ToolJet 应用时准确配置、动态控制该组件。组件概述单值滑块与双把手区间Range Slider 广泛应用于各类 UI 场景其核心用途之一是对内容进行过滤、探索与关联内容筛选并大量出现在控制面板与设置选项中。该组件支持一种关键的形态切换——Two handles双把手启用后滑块由单把手变为两个可拖拽把手用户可以选择一个数值区间而非单个值。从源码结构看ToolJet 仓库中实际并存两套实现Legacy 版组件注册名为RangeSliderLegacy显示名为 Range Slider (Legacy)渲染实现位于 RangeSlider.jsx其属性面板正是官方文档描述的 Minimum value / Maximum value / Value / Two handles 四属性模型V2 版组件注册名为RangeSlider即当前画布中的 Range Slider渲染实现位于 RangeSliderV2.jsx在 Legacy 基础上增加了标签、步进、刻度标记、加载态、禁用态与更细的样式控制。两者均在 widgets/index.js 中统一注册导出。下文以文档描述的属性体系为主线并对照源码给出默认值与扩展能力。Properties核心属性与默认值官方文档定义的最小属性集如下表完整继承自 range-slider.md属性说明Minimum value设置滑块的最小值字段接受任意数值Maximum value设置滑块的最大值字段接受任意数值Value设置组件加载时的默认值可结合数据与业务需求做预填Two handles启用后滑块拥有两个拖拽把手用于定义一段取值区间而非单个值对照 Legacy 配置源码 rangeslider.js各属性对应的内部键名与默认值为文档属性内部键名类型默认值Minimum valueminnumber0Maximum valuemaxnumber100Valuevaluecode支持{{ }}表达式50Two handlesenableTwoHandletogglebooleanfalse几个值得注意的实现细节Value 的类型value在 Legacy 中被声明为 code 类型且校验 schema 允许number或number[]数组这与双把手时值是一个数组的行为一致表达式支持min、max、value的 definition 中分别写作{{0}}、{{100}}、{{50}}即三者都支持 fx 表达式动态绑定例如可以让 Max value 跟随某个查询结果渲染逻辑RangeSlider.jsx 中用toArray (data) (Array.isArray(data) ? data : [data, max])将单值补全为区间并在enableTwoHandle为真时渲染带range属性的 rc-sliderSlider否则渲染单把手 Slider——这正是文档所说Two handles 从单值切换为区间的底层实现。V2 新增属性当前画布中的 Range SliderV2在 rangesliderV2.js 中将Two handles布尔开关升级为Slider type单选enableTwoHandle取值为slider/rangeSlider并新增以下属性属性说明默认值Label组件旁显示的标签文本LabelMin value / Max value最小 / 最大值对应 Legacy 的 Minimum / Maximum value0/100Default value单滑块模式下的初始值50Default start value双把手模式下的起始值仅 Range slider 模式显示50Default end value双把手模式下的结束值仅 Range slider 模式显示80Step size拖拽步长源码中传给 rc-slider 的step为 0 时回退为11Set marks刻度标记JS 表达式配置形如[{label: 25%, value: 25}, {label: 50%, value: 50}, {label: 75%, value: 75}]见 definitionShow loading state加载态开关falseDisable禁用态开关falseTooltip / Tooltip 格式悬停提示文本支持 Plain text / Markdown / HTML 三种格式plainText其中value、startValue、endValue通过conditionallyRender依据 Slider type 的取值决定显示哪一个即单滑块只显示 Default value区间模式则显示 Start/End 两个值这是文档中 Value 用于预填 能力在 V2 中更细化的体现。事件与动作从无 CSA到六个可控动作官方文档明确指出Range Slider目前没有任何 CSAComponent-Specific Actions组件特定动作用于控制该组件。这一描述与 Legacy 配置吻合——rangeslider.js 中未声明actions数组。但 V2 版本补齐了这一能力。onChange 事件两个版本都声明了onChange事件显示名 On change。从源码看它由 rc-slider 的onAfterChange回调触发即拖拽松手一次交互完成时触发而非每帧变化都触发拖拽过程中的每次数值变化则通过onChange回调持续写入暴露变量value见 RangeSlider.jsx 的onSliderChange/onRangeChange。典型用法是在 Button 的 onclick 中读取{{components.rangeslider1.value}}执行查询或跳转。V2 的 CSA 动作rangesliderV2.js 声明了六个动作均可在事件处理器中通过{{components.rangeslider1.xxx()}}调用动作参数作用setValueValue程序化设置单滑块值并触发 onChangesetRangeValueMin value、Max value程序化设置双把手区间并触发 onChangereset无复位到属性面板配置的默认值setDisableValuetoggle默认{{false}}切换禁用态setLoadingValuetoggle默认{{false}}切换加载态显示 SpinnersetVisibilityValuetoggle默认{{false}}切换可见性这些动作在组件内的具体实现可见 RangeSliderV2.jsxsetValue/setRangeValue会同步更新本地 state、写回暴露变量value并调用fireEvent(onChange)从而保证JS 改值与用户拖拽走同一套数据流。Exposed Variables如何读取滑块值文档定义了唯一的暴露变量变量说明访问方式value当 Two handles关闭时持有一个值对象开启时持有一个数组使用 JS 动态访问{{components.rangeslider1.value}}或{{components.rangeslider1.value[1]}}取区间上界源码印证了这一行为RangeSlider.jsx 中单把手模式调用setExposedVariable(value, singleHandleValue)写入数值双把手模式调用setExposedVariable(value, twoHandlesArray)写入[start, end]数组因此双把手场景下value[0]为下界、value[1]为上界。V2 进一步扩展了暴露变量集合rangesliderV2.jsvalue当前值数值或[start, end]数组label标签文本isVisible/isDisabled/isLoading可见性、禁用态、加载态的只读状态量方便在事件逻辑中做条件判断。GeneralTooltip在General折叠区中可以以字符串格式设置 Tooltip鼠标悬停在组件上时该字符串即作为提示浮层显示。V2 中该能力进一步升级为Tooltip 格式开关 文本字段的组合格式可选plainText/markdown/html文本字段支持 fx 表达式动态生成提示内容rangesliderV2.js。Devices多端可见性文档中 Devices 部分定义了两个开关属性说明期望取值Show on desktop控制组件在桌面端视图中是否可见可用开关按钮直接设置或点击fx输入逻辑表达式动态配置Show on mobile控制组件在移动端视图中是否可见同上两个版本配置中others段均声明了showOnDesktop/showOnMobile两个 toggle且初始 definition 均为showOnDesktop: true、showOnMobile: false——即新拖入的滑块默认只在桌面端显示需要在 Devices 中显式打开移动端。Styles颜色与可见性文档列出的样式项样式说明Line color输入十六进制颜色设置滑块**轨道track 底轨**的默认颜色Handle color输入十六进制颜色设置滑块**把手handle**的颜色Track color输入十六进制颜色设置滑块轨道上已激活部分的颜色Visibility以编程方式控制滑块可见性默认值为{{true}}文档同时提示凡字段旁带 fx 按钮的属性均可被编程配置。对照 Legacy 源码rangeslider.js三个颜色样式的内部键为lineColor/handleColor/trackColor默认色值均为#375FCFvisibility为 code 类型、默认{{true}}。在 RangeSlider.jsx 中可以看到它们的映射关系railStyle底轨取lineColortrackStyle激活段取trackColorhandleStyle把手取handleColor。visibility则在容器上同时作用于display与aria-hidden实现视觉与无障碍层面的隐藏。V2 的样式面板更细rangesliderV2.js除 Track默认#E4E7EB、Accent激活段、Handle默认#FFFFFF外还增加了Handle border、Marker label刻度文字颜色、标签颜色 / 字号 / 对齐side / top与左右方向、容器 Padding 等。源码实现剖析基于 rc-slider 的渲染两个版本都基于rc-slider库import Slider from rc-slider。单/双把手的切换在 JSX 层是二选一渲染enableTwoHandle为真V2 中为rangeSlider时渲染带range属性的Slider并传入defaultValue{[start, end]}否则渲染单值Slider。拖拽中的实时数值通过onChange写入 state 与暴露变量交互结束onAfterChange再触发画布级onChange事件形成实时更新变量、松手触发事件的双层数据流。表单重置集成两个组件都通过useFormClear来自 FormSignalContext注册了清理回调当所在 Form 触发清空信号时单滑块被重置为min双把手则重置为[min, min]RangeSlider.jsx。这意味着把 Range Slider 放入 Form 容器内后表单的 Reset 行为会自动覆盖其值——在搭建查询条件 重置类界面时无需额外手写清理逻辑。V2 的刻度、步进与悬停数值V2 版把Set marks属性一个对象数组表达式经reduce转换为 rc-slider 的marks参数其中会过滤掉value超过max的刻度点并剥离 label 中的%字符RangeSliderV2.jsxStep size直接映射为step{stepSize || 1}。此外V2 用handleRender给把手套了一层OverlayTrigger拖拽过程中在把手上方浮出当前数值 Tooltip让区间选择时用户无需盯住刻度读值。加载态时整个滑块区域被 Spinner 替换禁用态则通过pointerEvents: none与半透明样式锁定交互。值变更的受控同步V2 中有一个值得注意的受控同步逻辑RangeSliderV2.jsx 监听value、enableTwoHandle、startValue、endValue的变化并在非首渲染时执行resetFn()同时把resetFn本身作为暴露变量reset写入——这使得 fx 表达式修改 Default value、或 JS 调用reset()时画布上的滑块会回到属性面板定义的初始区间且不会在初次渲染时产生多余的变量写入isInitialRenderref 用于排除首次挂载。实际应用建议过滤器场景用双把手模式 {{components.rangeslider1.value[0]}}/value[1]作为查询参数配合onChange事件触发查询刷新是典型的区间过滤搭建方式动态上下界min/max/value支持 fx可以把上下界绑定到查询返回的数据如价格区间的 min/max让滑块随数据自适应编程控制在 V2 中优先使用setValue/setRangeValue/reset/setDisable/setLoading/setVisibility六个动作组合事件逻辑若组件仍为 Legacy 版本无动作只能通过修改value表达式或事件间赋值来间接控制多端应用默认仅在桌面端可见面向移动端的内部工具需手动打开 Show on mobile或用 fx 表达式按会话状态动态控制。综上ToolJet 的 Range Slider 以单值 / 区间双形态覆盖数值选择类交互属性与样式体系在文档层面保持了最小可用集而在源码层面Legacy 与 V2 两套配置和渲染实现提供了步进、刻度、标签、加载/禁用/可见性动作等完整能力。读者可先按 官方文档 配置基础属性再对照本文列出的源码文件路径深入核对默认值与行为边界。【免费下载链接】ToolJetOpen-source foundation of ToolJet AI - the enterprise app generation platform for internal tools, dashboards, business applications, workflows and AI agents. Build visually, from a prompt, or from Claude Code, Codex and Cursor over MCP 项目地址: https://gitcode.com/GitHub_Trending/to/ToolJet创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考