decimalSlider

Since Jmix 3.1

decimalSlider lets users select a Double value by dragging a handle along a track. Users can also move the handle with the arrow keys.

To work with Integer values, use integerSlider. To select a range of values, use decimalRangeSlider.

XML Element	`decimalSlider`
Java Class	`JmixDecimalSlider`

XML Element

decimalSlider

Java Class

JmixDecimalSlider

Basics

LIVE DEMO

By default, the slider takes values from 0 to 100 with a step of 1. Set step to a fractional number to let users select fractional values.

An example of decimalSlider that takes values from 0 to 1 with a step of 0.1:

<decimalSlider id="decimalSlider" label="DecimalSlider" width="20em"
               min="0" max="1" step="0.1" value="0.5"
               valueAlwaysVisible="true"
               helperText="The value bubble is always visible"/>

Data-aware `decimalSlider`

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.

To bind decimalSlider to an entity attribute, use the dataContainer and property attributes. The entity attribute must be of Double type.

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

Vaadin

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. See the example above.

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 doubleMin and doubleMax validators and shows a validation error. The validators are added automatically and are updated when you change min or max.

Value Display

LIVE DEMO

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, as in the example above.

The minMaxVisible attribute shows the min and max values below the track.

Validation

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

The following predefined validators are available for decimalSlider:

XML Element	`validators`
Predefined validators	custom - doubleMax - doubleMin - negative - negativeOrZero - notNull - positive - positiveOrZero

XML Element

validators

Predefined validators

custom - doubleMax - doubleMin - negative - negativeOrZero - notNull - positive - positiveOrZero

Attributes

The following attributes are specific to decimalSlider:

Name Description Default

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`

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 decimalSlider:

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 decimalSlider:

Name Description

Name	Description
`validator`	Validates the component value.

validator

Validates the component value.

The following shared handlers are supported by decimalSlider:

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

Elements

A decimalSlider can include tooltip and validators as its nested elements.