decimalRangeSlider
Since Jmix 3.1
decimalRangeSlider lets users select a range of Double values. It has two handles on a track: one sets the start of the range, and the other sets the end.
To work with Integer values, use integerRangeSlider. To select a single value, use decimalSlider.
XML Element |
|
|---|---|
Java Class |
|
Basics
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.
An example of decimalRangeSlider that takes values from 0 to 1 with a step of 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"/>Value
The value of decimalRangeSlider is a DecimalRangeSliderValue 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 DecimalRangeSliderValue(start, end) object to the setValue() method. The clear() method selects the whole range from min to max.
decimalRangeSlider cannot be bound to a data container and does not support validators. Read its value in the view controller. See integerRangeSlider for an example of a range slider that filters data. To show an error, set the errorMessage attribute and call setInvalid(true) in the controller.
The slider sends a new value to the server when the user releases a handle. To send the value on every step of the drag, set valueChangeMode to EAGER.
Range and Step
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.
Value Display
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, as in the example above.
The minMaxVisible attribute shows the min and max values below the track.
Accessible Names
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.
Attributes
The following attributes are specific to decimalRangeSlider:
| Name | Description | Default |
|---|---|---|
Sets the accessible name of the handle that sets the end of the range. See Accessible Names. |
— |
|
Sets the accessible name of the handle that sets the start of the range. See Accessible Names. |
— |
|
Sets the end of the initial range. If only |
— |
|
Sets the maximum value of the slider. See Range and Step. |
|
|
Sets the minimum value of the slider. See Range and Step. |
|
|
Shows the |
|
|
Shows the required indicator. The component does not check its value. |
|
|
Sets the start of the initial range. If only |
— |
|
Sets the interval between the values that the user can select. The step must be greater than 0. See Range and Step. |
|
|
Shows the current values above the handles all the time. If |
|
The following shared attributes are supported by decimalRangeSlider:
id - alignSelf - classNames - colspan - css - enabled - errorMessage - focusShortcut - height - helperText - justifySelf - label - maxHeight - maxWidth - minHeight - minWidth - readOnly - tabIndex - valueChangeMode - valueChangeTimeout - visible - width
Elements
A decimalRangeSlider can include a tooltip as its nested element.