Documentation versions (currently viewingVaadin 7)


Live Demo

The Slider is a vertical or horizontal bar that 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.

Vertical and horizontal Slider components

Slider has a number of different constructors that take a combination of the caption, minimum and maximum value, resolution, and the orientation of the slider.

// Create a vertical slider
Slider vertslider = new Slider(1, 100);

Minimum value of the slider range. The default is 0.0.


Maximum value of the slider range. The default is 100.0.


The number of digits after the decimal point. The default is 0.


The orientation can be either horizontal (SliderOrientation.HORIZONTAL) or vertical (SliderOrientation.VERTICAL). The default is horizontal.

As the Slider is a field component, you can handle value changes with a ValueChangeListener. The value of the Slider field is a Double object.

// Shows the value of the vertical slider
final Label vertvalue = new Label();

// Handle changes in slider value.
    new Property.ValueChangeListener() {
    public void valueChange(ValueChangeEvent event) {
        double value = (Double) vertslider.getValue();

        // Use the value
        box.setHeight((float) value, Sizeable.UNITS_PERCENTAGE);

// The slider has to be immediate to send the changes
// immediately after the user drags the handle.

You can set the value with the setValue() method defined in Slider that takes the value as a native double value. The setter can throw a ValueOutOfBoundsException, which you must handle.

// Set the initial value. This has to be set after the
// listener is added if we want the listener to handle
// also this value change.
try {
} catch (ValueOutOfBoundsException e) {

Alternatively, you can use the regular setValue(Object), which does not do bounds checking.

Vertical and horizontal Slider components shows both vertical (from the code examples) and horizontal sliders that control the size of a box. The slider values are displayed also in separate labels.

CSS Style Rules

.v-slider {}
.v-slider-base {}
.v-slider-handle {}

The enclosing style for the Slider is v-slider. The slider bar has style v-slider-base. Even though the handle is higher (for horizontal slider) or wider (for vertical slider) than the bar, the handle element is nevertheless contained within the slider bar element. The appearance of the handle comes from a background image defined in the background CSS property.