vaadin-framework/documentation/components/components-slider.asciidoc

---
title: Slider
order: 28
layout: page
---

[[components.slider]]
= [classname]#Slider#

ifdef::web[]
[.sampler]
image:{live-demo-image}[alt="Live Demo", link="http://demo.vaadin.com/sampler/#ui/data-input/other/slider"]
endif::web[]

The [classname]#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.

[[figure.components.slider.example1]]
.Vertical and horizontal [classname]#Slider# components
image::img/slider-example1-hi.png[width=40%, scaledwidth=70%]

[classname]#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.

[source, java]
----
// Create a vertical slider
Slider vertslider = new Slider(1, 100);
vertslider.setOrientation(SliderOrientation.VERTICAL);
----

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

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

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

__orientation__:: The orientation can be either horizontal ([parameter]#SliderOrientation.HORIZONTAL#) or vertical ([parameter]#SliderOrientation.VERTICAL#). The default is horizontal.

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

[source, java]
----
// Shows the value of the vertical slider
final Label vertvalue = new Label();
vertvalue.setSizeUndefined();

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

        // Use the value
        box.setHeight((float) value, Sizeable.UNITS_PERCENTAGE);
        vertvalue.setValue(String.valueOf(value));
    }
});

// The slider has to be immediate to send the changes
// immediately after the user drags the handle.
vertslider.setImmediate(true);
----

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

[source, java]
----
// 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 {
    vertslider.setValue(50.0);
} catch (ValueOutOfBoundsException e) {
}
----

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

<<figure.components.slider.example1>> 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


[source, css]
----
.v-slider {}
.v-slider-base {}
.v-slider-handle {}
----

The enclosing style for the [classname]#Slider# is [literal]#++v-slider++#. The
slider bar has style [literal]#++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.