不仅仅是区间选择：Element全新组件打造高效筛选新方式！

在公司的系统中，产品经理在设计时经常要求对某个字段进行区间阈值设置或作为筛选条件。但苦于element中没有非常契合的组件（slider组件并不支持两端均能设定），于是自己动手造了一个。

最终的展示效果如下：

这里以项目的需求为例，基本的需求如下：

• 分为左右值，包含左右值，正整数
• 支持左值、右值独立设置
• 交互友好

本组件的实现分为三大步：

第一步：理解业务需求

先理解业务的需求，明白组件要达到什么样的效果。本组件需要支持以下功能：

• 左右值独立设置 ：即左右值可以独立设置，且不相互影响。
• 区间阈值设置 ：即可以设置区间阈值，如 100~200。
• 支持包含左右值 ：即区间可以包含左右值，也可以不包含左右值。
• 正整数 ：即左右值只能是正整数。

第二步：设计组件原型

根据业务需求，设计组件原型。本组件的原型如下：

原型中，包含了左右值输入框、区间阈值开关、包含左右值开关。

第三步：实现组件

根据原型，实现组件。本组件的实现主要包括以下几个方面：

• 左右值输入框 ：左右值输入框是一个普通的输入框，但需要限制只能输入正整数。
• 区间阈值开关 ：区间阈值开关是一个开关，用来控制是否开启区间阈值功能。
• 包含左右值开关 ：包含左右值开关是一个开关，用来控制是否包含左右值。
• 区间选择逻辑 ：区间选择逻辑是组件的核心逻辑，用来判断区间是否满足条件。

第四步：组件测试

组件实现完成后，需要进行测试。本组件的测试主要包括以下几个方面：

• 功能测试 ：功能测试是用来测试组件是否满足业务需求。
• 性能测试 ：性能测试是用来测试组件的性能是否满足要求。
• 兼容性测试 ：兼容性测试是用来测试组件是否兼容不同的浏览器和操作系统。

组件的测试通过后，即可正式上线。本组件上线后，得到了广泛的好评，产品经理们纷纷表示这个组件非常实用。

写在最后

本组件是一个非常实用的组件，可以帮助产品经理快速实现区间阈值设置和筛选功能。如果你也有类似的需求，不妨试试这个组件。

如果本文对你有帮助，请给我一个赞，你的支持是我创作的动力。如果你有任何疑问或建议，请随时留言给我。你的关注和支持将帮助我创作更多更好的文章。此外，我还有其他相关文章与你分享，感兴趣的可以去看看：

[文章一：《如何在日常开发工作中提升工作效率？》](https://zhuanlan.zhihu.com/p/105519115)

[文章二：《软件开发过程中代码设计的三大原则》](https://zhuanlan.zhihu.com/p/111411070)

[文章三：《云原生时代的DevOps实践》](https://zhuanlan.zhihu.com/p/123065085)