diff options
Diffstat (limited to 'documentation/components/components-slider.asciidoc')
| -rw-r--r-- | documentation/components/components-slider.asciidoc | 112 |
1 files changed, 0 insertions, 112 deletions
diff --git a/documentation/components/components-slider.asciidoc b/documentation/components/components-slider.asciidoc deleted file mode 100644 index cc0198baa5..0000000000 --- a/documentation/components/components-slider.asciidoc +++ /dev/null @@ -1,112 +0,0 @@ ---- -title: Slider -order: 28 -layout: page ---- - -[[components.slider]] -= [classname]#Slider# - -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. - -[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 -final 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. - -[[figure.components.slider.example1]] -.The [classname]#Slider# Component -image::img/slider-example1-hi.png[] - -== 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. - - - - |