integerSlider

Since Jmix 3.1

integerSlider lets users select an Integer value by dragging a handle along a track. Users can also move the handle with the arrow keys.

To work with Double values, use decimalSlider. To select a range of values, use integerRangeSlider.

XML Element

integerSlider

Java Class

JmixIntegerSlider

Basics

LIVE DEMO

By default, the slider takes values from 0 to 100 with a step of 1. An example of integerSlider:

<integerSlider id="integerSlider" label="IntegerSlider" width="20em" value="50"/>

Data-aware integerSlider

LIVE DEMO

Data binding refers to linking a visual component to a data container. Changes in the visual component or corresponding data container can trigger updates to one another. See Using Data Components for more details.

The following example produces a data-aware integerSlider. The entity attribute must be of Integer type.

<data>
    <instance id="customerDc"
              class="io.jmix.uisamples.entity.Customer"
              fetchPlan="_local"/>
</data>
<layout>
    <integerSlider id="ageSlider" label="Slider connected to a container" width="20em"
                   min="0" max="100" step="1"
                   minMaxVisible="true"
                   dataContainer="customerDc" property="age"/>
</layout>

The customerDc instance container holds a Customer entity. The dataContainer and property attributes bind the component to its age attribute.

The slider sends a new value to the server when the user releases the handle. To send the value on every step of the drag, set valueChangeMode to EAGER.

Empty Value

A slider cannot show an empty value. When it has no value, it shows the min value instead. The slider treats it as an empty value:

  • If the bound attribute is null, the slider shows min, but does not write it to the entity, and the DataContext does not register a change. The attribute gets a value only when the user moves the handle or when you set a value in code.

  • An unbound slider is empty until the user moves the handle or you set a value in code.

  • Calling clear() or setValue(null) moves the handle to min and makes the slider empty. A bound slider also sets the attribute to null.

The isEmpty() method returns true for an empty slider, although getValue() returns min. Validators get null as the value of an empty slider. If the slider is required, an empty slider fails validation.

Range and Step

LIVE DEMO

The min and max attributes set the range of values, and step sets the interval between them. The values that the user can select are counted from min: min, min + step, min + 2 * step, and so on.

<integerSlider id="stepSlider" label="With min, max and step" width="20em"
               min="0" max="50" step="5" value="20"
               minMaxVisible="true"
               helperText="Values from 0 to 50 with a step of 5"/>

The slider does not change a value that is outside the range. Such a value can come from the bound attribute or from code. The slider checks the value with the min and max validators and shows a validation error. The validators are added automatically and are updated when you change min or max.

Value Display

Vaadin

By default, the slider shows the current value above the handle only while the user interacts with it. Set valueAlwaysVisible to true to show the value all the time.

The minMaxVisible attribute shows the min and max values below the track, as in the example above.

Validation

To check the value of integerSlider, you can use a validator in a nested validators element. Validators run each time the value changes.

The following predefined validators are available for integerSlider:

XML Element

validators

Predefined validators

custom - digits - max - min - negativeOrZero - negative - notNull - positiveOrZero - positive

Attributes

The following attributes are specific to integerSlider:

Name Description Default

max

Sets the maximum value of the slider. A value greater than max invalidates the component. See Range and Step.

100

min

Sets the minimum value of the slider. A value less than min invalidates the component. An empty slider shows this value. See Empty Value.

0

minMaxVisible

Shows the min and max values below the track.

false

step

Sets the interval between the values that the user can select. The step must be greater than 0. See Range and Step.

1

value

Sets the component value.

—

valueAlwaysVisible

Shows the current value above the handle all the time. If false, the value is shown only while the user interacts with the slider.

false

The following shared attributes are supported by integerSlider:

id - alignSelf - ariaLabel - ariaLabelledBy - classNames - colspan - css - dataContainer - enabled - errorMessage - focusShortcut - height - helperText - justifySelf - label - maxHeight - maxWidth - minHeight - minWidth - property - readOnly - required - requiredMessage - tabIndex - valueChangeMode - valueChangeTimeout - visible - width

Handlers

The following handlers are specific to integerSlider:

Name Description

validator

Validates the component value.

The following shared handlers are supported by integerSlider:

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

Elements

An integerSlider can include tooltip and validators as its nested elements.

See Also