<?xml version='1.0' encoding='UTF-8'?>
<section>
  <sectioninfo>
    <keywordset>
      <keyword>dragged handle control</keyword>
      <keyword>rich:inputNumberSlider</keyword>
      <keyword>HtmlInputNumberSlider</keyword>
    </keywordset>
  </sectioninfo>
  <table>
    <title>Component identification parameters </title>
    <tgroup cols="2">
      <thead>
        <row>
          <entry>Name</entry>
          <entry>Value</entry>
        </row>
      </thead>
      <tbody>
        <row>
          <entry>component-type</entry>
          <entry>org.richfaces.inputNumberSlider</entry>
        </row>
        <row>
          <entry>component-class</entry>
          <entry>org.richfaces.component.html.HtmlInputNumberSlider</entry>
        </row>
        <row>
          <entry>component-family</entry>
          <entry>org.richfaces.inputNumberSlider</entry>
        </row>
        <row>
          <entry>renderer-type</entry>
          <entry>org.richfaces.InputNumberSliderRenderer</entry>
        </row>
        <row>
          <entry>tag-class</entry>
          <entry>org.richfaces.taglib.InputNumberSliderTag</entry>
        </row>
      </tbody>
    </tgroup>
  </table>

  <section>
    <title>Creating the Component with a Page Tag</title>
    <para>To create the simplest variant on a page use the following syntax:</para>

    <para>
      <emphasis role="bold">Example:</emphasis>
    </para>
    <programlisting role="XML"><![CDATA[...
    <rich:inputNumberSlider minValue="0" maxValue="100" step="1"/>	
...
]]></programlisting>
  </section>
  <section>
    <title>Creating the Component Dynamically Using Java</title>

    <para>
      <emphasis role="bold">Example:</emphasis>
    </para>
    <programlisting role="JAVA"><![CDATA[import org.richfaces.component.html.HtmlInputNumberSlider;
...
HtmlInputNumberSlider mySlider = new HtmlInputNumberSlider();
...
]]></programlisting>
  </section>
  <section>
    <title>Details of Usage</title>
    <para><emphasis role="bold">
        <property>&lt;rich:inputNumberSlider&gt;</property>
      </emphasis> is used to facilitate your data input with rich UI Controls.</para>
    <para>Here is the simplest variant of a slider definition with
          <emphasis><property>&quot;minValue&quot;</property>,</emphasis>
      <emphasis>
        <property>&quot;maxValue&quot;</property>
      </emphasis> and <emphasis>
        <property>&quot;step&quot;</property>
      </emphasis> (on default = &quot;1&quot;) attributes, which define the beginning and
      the end of a numerical area and a <property>slider</property> property step.</para>


    <para>
      <emphasis role="bold">Example:</emphasis>
    </para>
    <programlisting role="XML"><![CDATA[<rich:inputNumberSlider></rich:inputNumberSlider>]]></programlisting>

    <para>It generates on a page:</para>
    <figure>
      <title>Generated <emphasis role="bold"><property>&lt;rich:InputNumberSlider&gt;</property></emphasis></title>
      <mediaobject>
        <imageobject>
          <imagedata fileref="images/slider2.png"/>
        </imageobject>
      </mediaobject>
    </figure>
    <para> Using <emphasis>
        <property>&quot;showInput&quot;</property>
      </emphasis> (default is true) and <emphasis>
        <property>&quot;enableManualInput&quot;</property>
      </emphasis> (default value is true) attributes, it&apos;s possible to output the input
      area near the slider, and make it read-only or editable.</para>
    <para>To remove input area use <emphasis>
        <property>&quot;showInput=&quot;false&quot;</property>
      </emphasis>:</para>

    <para>
      <emphasis role="bold">Example:</emphasis>
    </para>
    <programlisting role="XML"><![CDATA[<rich:inputNumberSlider minValue="1"  maxValue="100" showInput="false"/>]]></programlisting>
    <para>It looks at page like:</para>
    <figure>
      <title><emphasis role="bold"><property>&lt;rich:inputNumberSlider&gt;</property></emphasis> without input field</title>
      <mediaobject>
        <imageobject>
          <imagedata fileref="images/slider3.png"/>
        </imageobject>
      </mediaobject>
    </figure>
    <para>It&apos;s also possible to switch off displaying of &quot;boundary
      values&quot; and a toolTip showing on a handle drawing. This could be performed with the
      help of the component defined attributes: <emphasis>
        <property>&quot;showBoundaryValues&quot;</property>
      </emphasis> which is responsible for &quot;boundary values&quot; displaying (default
      is true) and <emphasis>
        <property>&quot;showToolTip&quot;</property>
      </emphasis> which is responsible for tooltTip displaying (default is true).</para>

    <para>Moreover, to add e.g. some JavaScript effects, events defined on it are used.</para>
    <itemizedlist>
      <listitem> onchange </listitem>
      <listitem> onmouseover </listitem>
      <listitem> onclick </listitem>
      <listitem> onfocus </listitem>
      <listitem> onmouseout </listitem>
      <listitem> etc. </listitem>
    </itemizedlist>
    <para>
      The <emphasis>
        <property>&quot;label&quot;</property>
      </emphasis> attribute is a generic attribute.
      The <emphasis>
        <property>&quot;label&quot;</property>
      </emphasis> attribute provides an association between a component, and the message that the component (indirectly) produced.  
      This attribute defines the parameters of localized error and informational messages that
      occur as a result of conversion, validation, or other application actions during the request
      processing lifecycle. With the help of this attribute you can  replace the
      last parameter substitution token shown in the messages. For example, {1} for “DoubleRangeValidator.MAXIMUM”, {2}
      for “ShortConverter.SHORT”.
    </para>

  </section>
  <section>
    <title>Look-and-Feel Customization</title>
    
    <para>For skinnability implementation, the components use a <emphasis>
      <property>style class redefinition method.</property>
    </emphasis> Default style classes are mapped on <emphasis>
      <property>skin parameters.</property>
    </emphasis></para>
    
    <para>There are two ways to redefine the appearance of all <emphasis role="bold">
      <property>&lt;rich:inputNumberSlider&gt;</property>
    </emphasis> components at once:</para>
    
    <itemizedlist>
      <listitem>
        <para>Redefine the corresponding skin parameters</para>
      </listitem>
      
      <listitem>
        <para>Add to your style sheets <emphasis>
          <property>style classes</property>
        </emphasis> used by a <emphasis role="bold">
          <property>&lt;rich:imputNumberSlider&gt;</property>
        </emphasis> component</para>
      </listitem>
    </itemizedlist>
  </section>
  
  <section>   
    <title>Skin Parameters Redefinition</title>
    
    <table>
      <title>Skin parameters redefinition for a bar</title>
      <tgroup cols="2">
        <thead>
          <row>
            <entry>Skin parameters</entry>
            <entry>CSS properties</entry>
          </row>
        </thead>
        <tbody>
          <row>
            <entry>controlBackgroundColor</entry>
            <entry>background-color</entry>
          </row>
        </tbody>
      </tgroup>
    </table>
    
    <table>
      <title>Skin parameters redefinition for numbers</title>
      <tgroup cols="2">
        <thead>
          <row>
            <entry>Skin parameters</entry>
            <entry>CSS properties</entry>
          </row>
        </thead>
        <tbody>
          <row>
            <entry>generalFamilyFont</entry>
            <entry>font-family</entry>
          </row>
          <row>
            <entry>generalSizeFont</entry>
            <entry>font-size</entry>
          </row>
          <row>
            <entry>generalTextColor</entry>
            <entry>color</entry>
          </row>
          <row>
            <entry>panelBorderColor</entry>
            <entry>border-color</entry>
          </row>
          <row>
            <entry>generalSizeFont</entry>
            <entry>line-height</entry>
          </row>
        </tbody>
      </tgroup>
    </table>
    
    <table>
      <title>Skin parameters redefinition for a text field</title>
      <tgroup cols="2">
        <thead>
          <row>
            <entry>Skin parameters</entry>
            <entry>CSS properties</entry>
          </row>
        </thead>
        <tbody>
          <row>
            <entry>controlBackgroundColor</entry>
            <entry>background-color</entry>
          </row>
          <row>
            <entry>generalFamilyFont</entry>
            <entry>font-family</entry>
          </row>
          <row>
            <entry>generalSizeFont</entry>
            <entry>font-size</entry>
          </row>
          <row>
            <entry>controlTextColor</entry>
            <entry>color</entry>
          </row>
          <row>
            <entry>panelBorderColor</entry>
            <entry>border-color</entry>
          </row>
          <row>
            <entry>subBorderColor</entry>
            <entry>border-bottom-color</entry>
          </row>
          <row>
            <entry>subBorderColor</entry>
            <entry>border-right-color</entry>
          </row>
        </tbody>
      </tgroup>
    </table>
    
    <table>
      <title>Skin parameters redefinition for a hint</title>
      <tgroup cols="2">
        <thead>
          <row>
            <entry>Skin parameters</entry>
            <entry>CSS properties</entry>
          </row>
        </thead>
        <tbody>
          <row>
            <entry>tipBackgroundColor</entry>
            <entry>background-color</entry>
          </row>
          <row>
            <entry>tipBorderColor</entry>
            <entry>border-color</entry>
          </row>
          <row>
            <entry>generalFamilyFont</entry>
            <entry>font-family</entry>
          </row>
          <row>
            <entry>generalSizeFont</entry>
            <entry>font-size</entry>
          </row>
        </tbody>
      </tgroup>
    </table>
 
  </section>
  
  <section>
    <title>Definition of Custom Style Classes</title>
    
    <para>On the screenshot there are classes names that define styles for component elements.</para>
    
    <figure>
      <title>Style classes</title>
      <mediaobject>
        <imageobject>
          <imagedata fileref="images/slider5.png"/>
        </imageobject>
      </mediaobject>
    </figure>
    
    <table  id="tab_cn">
      <title>Classes names that define a component appearance</title>
      <tgroup cols="2">
        <thead>
          <row>
            <entry>Class name</entry>
            <entry>Description</entry>
          </row>
        </thead>
        <tbody>
          <row>
            <entry>rich-slider</entry>
            <entry>Defines styles for a wrapper table element of a component</entry>
          </row>
          <row>
            <entry>rich-inslider-track</entry>
            <entry>Defines styles for a bar</entry>
          </row>
          <row>
            <entry>rich-inslider-handler</entry>
            <entry>Defines styles for a slider handler</entry>
          </row>
          <row>
            <entry>rich-inslider-handler-selected</entry>
            <entry>Defines styles for a selected handler</entry>
          </row>
          <row>
            <entry>rich-inslider-field</entry>
            <entry>Defines styles for a text field</entry>
          </row>
          <row>
            <entry>rich-inslider-right-num</entry>
            <entry>Defines styles for the right number</entry>
          </row>
          <row>
            <entry>rich-inslider-left-num</entry>
            <entry>Defines styles for the left number</entry>
          </row>
          <row>
            <entry>rich-inslider-tip</entry>
            <entry>Defines styles for a hint</entry>
          </row>
        </tbody>
      </tgroup>
    </table>
    <para>In order to redefine styles for all <emphasis role="bold">
      <property>&lt;rich:inputNumberSlider&gt;</property>
    </emphasis> components on a page using CSS, it&apos;s enough to create classes with the
      same names (possible classes could be found in the table <link linkend="tab_cn">above</link>) and define necessary properties in them. An example is placed below:</para>
  
    <para>
      <emphasis role="bold">Example:</emphasis>
    </para>
    <programlisting role="CSS"><![CDATA[...
.rich-inslider-tip{
    background-color: #FFDAB9;
    font-family: Arial Black;
}	
...]]></programlisting>  
    
    <para>This is a result:</para>
    
    <figure>
      <title>Redefinition styles with predefined classes</title>
      <mediaobject>
        <imageobject>
          <imagedata fileref="images/inputNumberSlider_CS2.png"/>
        </imageobject>
      </mediaobject>
    </figure>
  
    <para>In the example a tip background color and font family was changed.</para>
   
    <para>Also it’s possible to change styles of particular <emphasis role="bold"
      ><property>&lt;rich:inputNumberSlider&gt;</property></emphasis> component. In this case you should create own style classes and use them in corresponding <emphasis role="bold"
        ><property>&lt;rich:inputNumberSlider&gt;</property></emphasis> <emphasis><property>styleClass</property></emphasis> attributes. An example is placed below:</para>
   
    <para>
      <emphasis role="bold">Example:</emphasis>
    </para>
    <programlisting role="CSS"><![CDATA[...
.myClass{
    font-style: italic;
    font-weight:bold;
    font-size:12px;
}
...]]></programlisting>  
    <para>The <emphasis><property>&quot;inputClass&quot;</property></emphasis> attribute for <emphasis role="bold"
      ><property>&lt;rich:inputNumberSlider&gt; </property></emphasis> is defined as it’s shown in the example below:</para>
    
    <para>
      <emphasis role="bold">Example:</emphasis>
    </para>
    <programlisting role="CSS"><![CDATA[<rich: inputNumberSlider ... inputClass="myClass"/>
]]></programlisting>    
    
    <para>This is a result:</para>
    
    <figure>
      <title>Redefinition styles with own classes and <emphasis><property>styleClass</property></emphasis> attributes</title>
      <mediaobject>
        <imageobject>
          <imagedata fileref="images/inputNumberSlider_CS1.png"/>
        </imageobject>
      </mediaobject>
    </figure>  
    
    <para>As it could be seen on the picture above, the font style for input text was changed.</para>   
   
   
  </section>
  <section>
    <title>Relevant Resources Links</title>
    <para>
      <ulink
        url="http://livedemo.exadel.com/richfaces-demo/richfaces/inputNumberSlider.jsf?c=inputNumberSlider"
        >Here</ulink> you can see the example of <emphasis role="bold"
        ><property>&lt;rich:inputNumberSlider&gt;</property></emphasis> usage and sources for the given example.
    </para>
  </section>

</section>
