123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106 |
- ---
- 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.
|