integerRangeSlider

Since Jmix 3.1

integerRangeSlider lets users select a range of Integer values. It has two handles on a track: one sets the start of the range, and the other sets the end.

To work with Double values, use decimalRangeSlider. To select a single value, use integerSlider.

XML Element

integerRangeSlider

Java Class

IntegerRangeSlider

Basics

LIVE DEMO

By default, the slider takes values from 0 to 100 with a step of 1, and the selected range covers the whole track. Use the startValue and endValue attributes to set the initial range. If you set only one of them, the other one gets the min or max value.

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

Value

The value of integerRangeSlider is an IntegerRangeSliderValue record. Its start() and end() methods return the start and the end of the selected range. The start cannot be greater than the end.

To set the range in code, pass a new IntegerRangeSliderValue(start, end) object to the setValue() method. The clear() method selects the whole range from min to max.

integerRangeSlider cannot be bound to a data container and does not support validators. Read its value in the view controller, as shown in the example below. To show an error, set the errorMessage attribute and call setInvalid(true) in the controller.

Using as a Filter

LIVE DEMO

A range slider is a good choice for filtering data by a number attribute. In the following example, the user selects an age range, and the view loads the customers whose age is within this range.

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();
}

The ComponentValueChangeEvent handler passes the start and the end of the selected range to the loader query parameters and loads the data again. The slider sends a new value to the server when the user releases a handle, so the view loads the data once for each new range. To send the value on every step of the drag, set valueChangeMode to EAGER.

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.

<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"/>

Value Display

Vaadin

By default, the slider shows the current values above the handles only while the user interacts with them. Set valueAlwaysVisible to true to show the values all the time.

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

Accessible Names

Vaadin

Screen readers announce each handle by its own accessible name. By default, the names are based on the label. Use the accessibleNameStart and accessibleNameEnd attributes to set other names, as in the example above.

Attributes

The following attributes are specific to integerRangeSlider:

Name Description Default

accessibleNameEnd

Sets the accessible name of the handle that sets the end of the range. See Accessible Names.

—

accessibleNameStart

Sets the accessible name of the handle that sets the start of the range. See Accessible Names.

—

endValue

Sets the end of the initial range. If only startValue is set, the end is max.

—

max

Sets the maximum value of the slider. See Range and Step.

100

min

Sets the minimum value of the slider. See Range and Step.

0

minMaxVisible

Shows the min and max values below the track.

false

required

Shows the required indicator. The component does not check its value.

false

startValue

Sets the start of the initial range. If only endValue is set, the start is min.

—

step

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

1

valueAlwaysVisible

Shows the current values above the handles all the time. If false, the values are shown only while the user interacts with the slider.

false

The following shared attributes are supported by integerRangeSlider:

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

Handlers

The following shared handlers are supported by integerRangeSlider:

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

Elements

An integerRangeSlider can include a tooltip as its nested element.

See Also