3.5.2.1.41. Slider
LIVE DEMO

Slider is a vertical or horizontal bar. It allows setting a numeric value within a defined range by dragging a bar handle with the mouse. The value is shown when dragging the handle.

gui slider

XML name of the component: slider.

The default data type of the slider is double.You can set the numeric data type for the component such as int, long, double, and decimal using the datatype attribute. It can be declared in the XML descriptor or using the API.

To create a slider connected to data use the dataContainer and property attributes. In this case, the data type will be determined from the entity attribute contained in the property.

In the example, the data type of the slider will be set as the data type of the amount attribute of the Order entity.

<data>
    <instance id="orderDc" class="com.company.sales.entity.Order" view="_local">
        <loader/>
    </instance>
</data>
<layout>
    <slider dataContainer="orderDc" property="amount"/>
</layout>

The slider component has the following specific attributes:

  • max - the maximum value of the slider range. The default is 100.

  • min - the minimum value of the slider range. The default is 0.

  • resolution - a number of digits after the decimal point. The default is 0.

  • orientation - horizontal or vertical placement of the slider. The default is horizontal.

  • updateValueOnClick - if set to true, the value of the slider can be updated by clicking on the bar. The default is false.

Here is an example of a slider that is placed vertically with the integer data type and the range of values from 2 to 20.

<slider id="slider"
        orientation="vertical"
        datatype="int"
        min="2"
        max="20"/>

The value can be retrieved using getValue() method and set using setValue().

To track changes of the slider value, as well as of any other components implementing the Field interface, use the ValueChangeListener and subscribe to the corresponding event. In the example below the value of the Slider is written into TextField if the value is changed.

@Inject
private TextField<Integer> textField;

@Subscribe("slider")
private void onSliderValueChange(HasValue.ValueChangeEvent<Integer> event) {
  textField.setValue(event.getValue());
}
Attributes of slider

align - caption - captionAsHtml - colspan - contextHelpText - contextHelpTextHtmlEnabled - css - dataContainer - datatype - description - descriptionAsHtml - enable - box.expandRatio - height - htmlSanitizerEnabled - icon - id - max - min - orientation - property - requiredMessage - resolution - responsive - required - rowspan - stylename - updateValueOnClick - visible - width

API

setContextHelpText - addValueChangeListener