integerRangeSlider 整数范围滑动输入

Jmix 3.1+

integerRangeSlider 支持用户选择 Integer 值的范围。在轨道上有两个手柄：一个设置范围的起点，另一个设置终点。

如需处理 Double 值，请使用 decimalRangeSlider。如需选择单个值，请使用 integerSlider。

XML 元素

integerRangeSlider

Java 类

IntegerRangeSlider

基本用法

在线示例

默认情况下，滑块取值范围为 0 到 100，步长为 1，选中的范围覆盖整个轨道。使用 startValue 和 endValue 属性设置初始范围。如果只设置其中一个，另一个会取 min 或 max 值。

<integerRangeSlider id="integerRangeSlider" label="IntegerRangeSlider" width="20em"
                    startValue="20" endValue="80"
                    accessibleNameStart="Minimum" accessibleNameEnd="Maximum"/>

值

integerRangeSlider 的值是一个 IntegerRangeSliderValue record。其 start() 和 end() 方法返回所选范围的起点和终点。起点不能大于终点。

如需在代码中设置范围值，将 IntegerRangeSliderValue(start, end) 对象传递给 setValue() 方法。clear() 方法会将范围值重置为从 min 到 max。

integerRangeSlider 不能绑定到数据容器，也不支持验证器。因此，需要在视图控制器中手动读取值。使用范围滑块过滤数据的示例，请参阅 下面的示例。如需显示错误信息，请设置 errorMessage 属性，并在控制器中调用 setInvalid(true)。

作为过滤器使用

在线示例

范围滑块是数字属性过滤器的一个不错选择。在下面的示例中，用户选择一个年龄范围，视图会加载年龄在此范围内的客户。

XML
<data readOnly="true">
    <collection id="customersDc"
                class="io.jmix.uisamples.entity.Customer"
                fetchPlan="_local">
        <loader id="customersDl">
            <query>
                <![CDATA[select e from Customer e
                         where e.age >= :minAge and e.age <= :maxAge
                         order by e.age]]>
            </query>
        </loader>
    </collection>
</data>
<layout>
    <integerRangeSlider id="ageRangeSlider" label="Age" width="20em"
                        min="18" max="90" step="1"
                        startValue="25" endValue="50"
                        minMaxVisible="true"
                        accessibleNameStart="Minimum age" accessibleNameEnd="Maximum age"/>
    <dataGrid id="customersDataGrid" dataContainer="customersDc"
              width="100%" minHeight="20em">
        <columns>
            <column property="name"/>
            <column property="lastName"/>
            <column property="age"/>
        </columns>
    </dataGrid>
</layout>
Java
@ViewComponent
protected IntegerRangeSlider ageRangeSlider;
@ViewComponent
protected CollectionLoader<Customer> customersDl;

@Subscribe
protected void onBeforeShow(BeforeShowEvent event) {
    loadCustomers(ageRangeSlider.getValue());
}

@Subscribe("ageRangeSlider")
protected void onAgeRangeSliderValueChange(
        ComponentValueChangeEvent<IntegerRangeSlider, IntegerRangeSliderValue> event) {
    loadCustomers(event.getValue());
}

protected void loadCustomers(IntegerRangeSliderValue range) {
    customersDl.setParameter("minAge", range.start());
    customersDl.setParameter("maxAge", range.end());
    customersDl.load();
}

ComponentValueChangeEvent 事件的处理程序将所选范围传递给加载器的查询参数，并重新加载数据。滑块在用户释放控件时会将新值发送到服务端，因此视图在每次范围变更时加载一次数据。如需在拖动的每一步发送值，请将 valueChangeMode 设置为 EAGER。

范围和步长

在线示例

min 和 max 属性设置值的范围，step 设置值之间的间隔。用户可以选择的值从 min 开始计算：min、min + step、min + 2 * step，依此类推。

<integerRangeSlider id="stepRangeSlider" label="With min, max and step" width="20em"
                    min="0" max="50" step="5"
                    startValue="10" endValue="35"
                    minMaxVisible="true"
                    helperText="Values from 0 to 50 with a step of 5"/>

值显示

Vaadin

默认情况下，滑块仅在用户与手柄交互时在手柄上方显示当前值。将 valueAlwaysVisible 设置为 true 可始终显示值，例如 上面的示例。

minMaxVisible 属性会在轨道下方显示 min 和 max 值。例如 上面的示例。

无障碍名称

Vaadin

屏幕阅读器通过每个手柄自己的无障碍名称来朗读。默认情况下，名称基于标签。使用 accessibleNameStart 和 accessibleNameEnd 属性设置其他名称，例如 基本用法中的示例。

XML 属性

下面是 integerRangeSlider 的特殊属性：

名称 描述 默认值

accessibleNameEnd

设置范围终点手柄的无障碍名称。参考 无障碍名称。

—

accessibleNameStart

设置范围起点手柄的无障碍名称。参考 无障碍名称。

—

endValue

设置初始范围的终点。如果只设置了 startValue，则终点为 max。

—

max

设置滑块的最大值。参考 范围和步长。

100

min

设置滑块的最小值。参考 范围和步长。

0

minMaxVisible

在轨道下方显示 min 和 max 值。

false

required

显示必填指示符。但组件不会检查值。

false

startValue

设置初始范围的起点。如果只设置了 endValue，则起点为 min。

—

step

设置用户可选值之间的间隔。步长必须大于 0。参考 范围和步长。

1

valueAlwaysVisible

始终在手柄上方显示当前值。如果为 false，则仅在用户与滑块交互时显示值。

false

下面是 integerRangeSlider 支持的其他通用属性：

id - alignSelf - classNames - colspan - css - enabled - errorMessage - focusShortcut - height - helperText - justifySelf - label - maxHeight - maxWidth - minHeight - minWidth - readOnly - tabIndex - valueChangeMode - valueChangeTimeout - visible - width

事件和处理器

下面是 integerRangeSlider 支持的通用事件：

AttachEvent - BlurEvent - ComponentValueChangeEvent - DetachEvent - FocusEvent - KeyDownEvent - KeyPressEvent - KeyUpEvent

XML 内部元素

一个 integerRangeSlider 可以包含 tooltip 作为其内部元素。

参考