decimalRangeSlider 浮点范围滑动输入

Jmix 3.1+

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

如需处理 Integer 值，请使用 integerRangeSlider。如需选择单个值，请使用 decimalSlider。

XML 元素

decimalRangeSlider

Java 类

DecimalRangeSlider

基本用法

在线示例

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

以下是一个 decimalRangeSlider 示例，取值范围为 0 到 1，步长为 0.1：

<decimalRangeSlider id="decimalRangeSlider" label="DecimalRangeSlider" width="20em"
                    min="0" max="1" step="0.1"
                    startValue="0.2" endValue="0.8"
                    valueAlwaysVisible="true"
                    helperText="The value bubbles are always visible"/>

值

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

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

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

当用户松开手柄时，滑块会向服务端发送新值。如果需要在拖动的每一步都发送值，请将 valueChangeMode 设置为 EAGER。

范围和步长

Vaadin

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

值显示

在线示例

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

minMaxVisible 属性会在轨道下方显示 min 和 max 值。

无障碍名称

Vaadin

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

XML 属性

下面是 decimalRangeSlider 的特殊属性：

名称 描述 默认值

accessibleNameEnd

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

—

accessibleNameStart

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

—

endValue

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

—

max

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

100

min

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

0

minMaxVisible

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

false

required

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

false

startValue

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

—

step

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

1

valueAlwaysVisible

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

false

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

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

事件和处理器

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

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

XML 内部元素

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

参考