Add documentation to master branch

Change-Id: I2504bb10f1ae73ec0cbc08b7ba5a88925caa1674

1 files changed, 117 insertions, 0 deletions

diff --git a/documentation/components/components-slider.asciidoc b/documentation/components/components-slider.asciidoc
new file mode 100644
index 0000000000..a2c99f4b5c
--- /dev/null
+++ b/documentation/components/components-slider.asciidoc
@@ -0,0 +1,117 @@
+---
+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.
+
+[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.
+
+
+
+