Vaadin Slider tutorial

Vaadin Slider tutorial shows how to use the Vaadin Slider component. The Vaadin Slider example displays the selected value in a label component.

Vaadin

Vaadin is a popular Java web development framework. Vaadin is used for building single page web applications.

Vaadin Slider

Slider is vertical or horizontal bar that allows choosing a numeric value within a defined range by dragging a bar handle with the mouse. During the dragging process, the value is shown. The default orientation of the Slider is horizontal and the default range is <0, 100>.

Vaadin Slider example

The following program demonstrates the usage of a Vaadin Slider component. The selected value from the Slider is displayed in a label component.

NetBeans IDE can be used to easily create a Vaadin web application. We need to install NetBeans Vaadin plugin and then create a new Vaadin Web Application Project. We will work with the MyUI.java file.

MyUI.java
package com.zetcode.vaadinslider;

import javax.servlet.annotation.WebServlet;

import com.vaadin.annotations.Theme;
import com.vaadin.annotations.Title;
import com.vaadin.annotations.VaadinServletConfiguration;
import com.vaadin.data.HasValue;
import com.vaadin.server.VaadinRequest;
import com.vaadin.server.VaadinServlet;
import com.vaadin.ui.Label;
import com.vaadin.ui.Slider;
import com.vaadin.ui.UI;
import com.vaadin.ui.VerticalLayout;

@Theme("mytheme")
@Title("Vaadin Slider")
public class MyUI extends UI {

    @Override
    protected void init(VaadinRequest vaadinRequest) {

        VerticalLayout verLayout = new VerticalLayout();

        Label lbl = new Label("");
        
        Slider slider = new Slider();
        slider.addValueChangeListener((HasValue.ValueChangeEvent<Double> event) -> {
            
            Double val = event.getValue();
            lbl.setValue(String.valueOf(val));
        });

        verLayout.addComponents(slider, lbl);
        verLayout.setSpacing(true);

        setContent(verLayout);
    }

    @WebServlet(urlPatterns = "/*", name = "MyUIServlet", asyncSupported = true)
    @VaadinServletConfiguration(ui = MyUI.class, productionMode = false)
    public static class MyUIServlet extends VaadinServlet {
    }
}

MyUI is the application entry point. Here we create the Slider component.

Label lbl = new Label("");

This is the Label component which dispays the value selected from the slider.

Slider slider = new Slider();

A Slider component is created in the default, horizontal orientation.

slider.addValueChangeListener((HasValue.ValueChangeEvent<Double> event) -> {
    
    Double val = event.getValue();
    lbl.setValue(String.valueOf(val));
});

With addValueChangeListener(), we add a listener for value changes. We get the current value of the Slider with the getValue() method. The retrieved value is set to the label with the setValue() method.

verLayout.addComponents(slider, lbl);
verLayout.setSpacing(true);

We add the label and the slider to the layout manager with the addComponents() method. Some spacing between the components is added with setSpacing().

mytheme.scss
@import "../valo/valo.scss";

@mixin mytheme {
  @include valo;

  .v-slider { width: 20em }
}

We increase the width of the Slider in the mytheme.scss file.

Vaadin Slider
Figure: Vaadin Slider

In this tutorial, we have showed how to use the Vaadin Slider component. You might also be interested in the related tutorials: Vaadin ComboBox tutorial, Vaadin Button tutorial, Vaadin TextArea tutorial, Vaadin CheckBox tutorial, Java tutorial.