为了更清晰的观察到筛选范围的区间内容，通常我们会在选择后高亮显示所选择的范围。通常在筛选员工的年龄、商品的价格、学生成绩等方面我们会使用到该效果，能够让用户更加快速了解到选择范围在所有选项中的占比情况。
功能：
- 通过数据选择器筛选年龄
- 可根据选择结果，动态图显示高亮范围
实现流程
一、范围选择
文字及数据选择器组件的位置及样式
PS：数据选择器的配置数据会在之后进行修改，当前步骤仅需调整其位置和样式即可
创建数据模型存放年龄数据
本次案例中需要对年龄数据进行筛选及利用，我们可以通过创建数据模型的方式导入年龄数据，方便后续的获取及使用。
建立age_range数据模型，并在模型中创建age字段，接着预览小程序从而让数据模型生效。
注意：预览之前需要先进行“小程序授权”
预览成功后，等待一分钟左右刷新页面，即可进入管理后台界面添加20-30岁范围内的年龄数据。
设置页面数据用于接收上下限的数值
我们需要对上下限的数据选择器的内容进行限制，且左右两个数据选择器的范围互为过滤条件，可通过页面数据作为中转来达到这个效果。设置left和right分别用来保存左右两个数据选择器选择的数据。
具体如何实现，看数据绑定的流程
数据选择器进行数据绑定
- 目的：通过数据选择器来进行范围的筛选。
以左侧下限_数据选择器为例：左侧的数据选择器确定的是高亮范围的最小值，因此他的数值需要比右侧的（数据选择器）数据小，又由于上限_数据选择器的值将赋值给页面数据right，即过滤条件为age小于等于页面数据right。
- 操作步骤：1. 修改模式为“对象”——2. 修改标题为“下限：”——3. 选择列表为“age_range”；排序字段：age，排序类型：升序；修改过滤条件：“age”小于等于“页面数据/right”——4. 选择显示字段为“age”——5. 选择默认值为“页面数据/left”
（注意：“默认值”参数在选择完显示字段后显示）
将选择的数据赋值给页面数据
由于左右两个数据选择器的范围互为过滤条件，在下限_数据选择器选择完最小值后，需要为“下限_数据选择器”添加行为“设置页面数据”，将选择的值赋值给页面数据/left。
右侧的上限_数据选择器配置方式和左侧相同，仅需要修改对应的数据，操作流程参考上述“下限_数据选择器”。
修改内容：数据：
- 标题：上限：
- 列表：过滤条件——age大于等于页面数据left
- 默认值：页面数据/right
行为：
对象：right
值：输入框/上限_数据选择器/age
二、完成高亮显示
对于数据选择器选择后的范围，需要通过横向列表高亮显示选择的范围。
横向列表内组件的位置及样式
- 列表内组件样式
- 确定的年龄范围
添加两个文字组件显示年龄的最大值及最小值
（若想两端的最大值和最小值根据表中数据进行变动可根据文档最后案例优化中修改）
绑定列表数据显示年龄范围
横向列表中需要显示的数量与添加的年龄数量相同，也就是说添加的年龄记录有几条，相应的横向列表就会有几项。
为了让每一个年龄都能在横向列表中占据一项，过滤条件将选为“无过滤条件”。同时让年龄从小到大显示，我们需要对“age”字段进行“升序”排序的操作（如果不进行排序，年龄将会根据更新时间进行排序，显示的年龄有可能就是乱序）。
由于年龄是否被选择将会有不同的显示状态，我们需要向横向列表列表中添加一个条件式容器，实现在不同的条件下显示不同的数据状态。
条件式容器添加三种状态
通过分析可得，也就是我们可以将横向列表中的内容的呈现状态分为：被选择，未被选择。其中被选中的部分可再分为：两端和中间，区别在两端的内容需呈现选择的具体数据，中间只需要高亮。
即横向列表的内容需有三种状态：
- 未被选择
- 被选中：两端
- 被选中：中间
- 添加三种状态
条件式容器的判断过程是从左向右进行判断，且默认会显示第一个子容器中的内容，因此我们会以“阴影”——“两侧”——“中间”的顺序添加三个状态。
点击条件式容器后在右侧属性栏的“数据”选项卡下添加状态。
- 添加组件
每个条件式子容器内的组件，根据要求进行搭建
- 未选择的数据即为阴影状态，颜色为浅灰色（直接复制高亮_视图即可）
- 被选择的上下限数据即为两侧状态，颜色为亮色且显示选择的上下限数值
- 被选择的中间范围数据即为中间状态，颜色为亮色
设置条件式子容器的条件及数据
- 未被选择（状态名称：阴影）
- 右侧未被选择的年龄为该项的数据比上限_数据选择器的值大
- 左侧未被选择的年龄为该项的数据比下限_数据选择器的值小
两个条件以满足其中一个即可，使用“或条件”连接两个条件。
- 被选择1（状态名称：两端）
- 该状态下，需要显示上下限范围的年龄信息。具体数据为该项数据中的“age”字段的值。
显示年龄的文字组件在视图组件中，需双击点进入视图组件后对文字组件的数据绑定，配置方式如下所示：
- 左侧被选择的年龄为该项的数据等于下限_数据选择器的值
- 右侧被选择的年龄为该项的数据等于上限_数据选择器的值
两个条件以满足其中一个即可，使用“或条件”连接两个条件。
- 被选择2（状态名称：中间）
中间的内容，无需设置条件
案例优化
当后台数据表中年龄的范围发生变化时，希望在界面中呈现的最小值和最大值也能随之发生变化。可通过请求远程数据，得到所有年龄的数据之后，使用聚合数据得到这组年龄中的最大值和最小值。
首先，点击选择页面后，在右侧属性面板中找到远程数据，添加一条远程数据，为了得到所有的年龄数据，这里的过滤条件选择为“无过滤条件”。
接着，可对最大值和最小值进行数据绑定。
- 左侧为范围的最小值，选择绑定数据为远程数据中的age字段的最小值（min）
- 右侧为范围的最大值，选择绑定数据为远程数据中的age字段的最大值（max）