Vaadin 7 UI Design By Example Beginner's Guide

Sliders

A Slider is a component that allows the user to drag an indicator to select a value within a configurable range. The following code will create a slider to select a value between 0 and 100:

Slider slider = new Slider("Drag the point");
slider.setMin(0.0);
slider.setMax(100.0);

We can set a value programmatically using the setValue method:

slider.setValue(30.0);

Note

If an out of the range value is set a ValueOutOfBoundsException is thrown.

This is how sliders look like:

Like many other input components, we can listen to value changes:

slider.addValueChangeListener(new ValueChangeListener() {
  public void valueChange(ValueChangeEvent event) { Notification.show("Attention! ...