<section role="NotInToc" id="rich_dataFilterSlider">
   <title>
				&lt;
				rich:dataFilterSlider
				&gt;
				<emphasis role="since">
         <superscript> available since <emphasis role="version">3.0.0</emphasis>
         </superscript>
      </emphasis>
   </title>
   <section>
      <title>Description</title>
      <para>A slider-based action component is used for filtering table data.</para>
      <figure>
        <title>
            <emphasis role="bold">
               <property>&lt;rich:dataFilterSlider&gt;</property>
            </emphasis> component</title>
         <mediaobject> 
            <imageobject>
               <imagedata fileref="images/dataFilterSlider_init.png"/>
            </imageobject>
         </mediaobject>
     </figure>
     </section>
   <section>     
      <title>Key Features</title>
      <itemizedlist>
        <listitem>
            <para>Filter any UIData based component in dependency on its child's values</para>
         </listitem>
        <listitem>
            <para>Fully skinnable control and input elements</para>
         </listitem>
        <listitem>
            <para>Optional value text field with an attribute-managed position</para>
         </listitem>
        <listitem>
            <para>Optional disablement of the component on a page</para>
         </listitem>
        <listitem>
            <para>Optional toolTip to display the current value while a handle is dragged</para>
         </listitem>
        <listitem>
            <para>Dragged state is stable after the mouse moves</para>
         </listitem>
        <listitem>
            <para>Optional manual input possible if a text input field is present</para>
         </listitem>
        <listitem>
            <para>Validation of manual input</para>
         </listitem>
      </itemizedlist>
   </section>
   <section>
      <title>Details of Usage</title>
      <para>The <emphasis role="bold">
            <property>dataFilterSlider</property>
         </emphasis> component is bound to some UIData component using the <emphasis>
            <property>"for"</property>
         </emphasis> attribute and filters data in a table. </para>
      <para>
         <emphasis role="bold">Example:</emphasis>
      </para>
      <programlisting role="XML"><![CDATA[...
<rich:dataFilterSlider sliderListener="#{mybean.doSlide}"
                        startRange="0"
                        endRange="50000"
                        increment="10000"
                        handleValue="1"
                        for="carIndex"
                        forValRef="inventoryList.carInventory" 
                        filterBy="getMileage" />
...
<h:dataTable id="carIndex"> 
		... 
</h:dataTable>
...]]></programlisting>
      <para>In this example other two attributes are used for filtering:</para>
      <itemizedlist>
         <listitem>
            <para>
               <emphasis>
                  <property>"forValRef"</property>
               </emphasis> is a string which is used in a value attribute of the target UIData component.
        It's designed for resetting the UIData component back to the original list provided
        by a backing bean. </para>
         </listitem>
         <listitem>
            <para>
               <emphasis>
                  <property>"filterBy"</property>
               </emphasis> is a getter of an object member that is to be compared to a slider value.
        It's a value that is used in results filtering. </para>
         </listitem>
      </itemizedlist>
      <para>
         <emphasis>
            <property>"handleValue"</property>
         </emphasis> is an attribute for keeping the current handle position on the
        <property>dataFilterSlider</property> component. Based on the current value, appropriate
      values obtained from a getter method defined in <emphasis>
            <property>"filterBy"</property>
         </emphasis> are filtered.</para>
      <para>One more important attribute is a <emphasis>
            <property>"storeResults"</property>
         </emphasis> one that allows the <property>dataFilterSlider</property> component to keep UIData
      target object in session.</para>
      <para>If it's necessary the component submits a form on event of a handle state
      changing, use the <emphasis>
            <property>"submitOnSlide"</property>
         </emphasis> attribute. When the attribute definition is <code>"true"</code>, submission on this event is
      defined.</para>
      <para>
      Information about the <emphasis>
            <property>"process"</property>
         </emphasis> attribute usage you can find in the<link linkend="process"> "Decide what to process " </link> guide section.
    </para>
  </section>
   <section>
      <title>Reference Data</title>
      <para>
         <ulink url="&tlddoc;rich/dataFilterSlider.html">Table of 
							&lt;rich:dataFilterSlider&gt; 
							 attributes</ulink>.
						</para>
      <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.DataFilterSlider</entry>
               </row>
               <row>
                  <entry>component-class</entry>
                  <entry>org.richfaces.component.html.HtmlDataFilterSlider</entry>
               </row>
               <row>
                  <entry>component-family</entry>
                  <entry>org.richfaces.DataFilterSlider</entry>
               </row>
               <row>
                  <entry>renderer-type</entry>
                  <entry>org.richfaces.DataFilterSliderRenderer</entry>
               </row>
               <row>
                  <entry>tag-class</entry>
                  <entry>org.richfaces.taglib.dataFilterSliderTag</entry>
               </row>
            </tbody>
         </tgroup>
      </table>
   	
   	<table>
   		<title>Style classes (selectors) with the corresponding skin parameters</title>
   		<tgroup cols="4">
   			<thead>
   				<row>
   					<entry>Class (selector) name</entry>
   					<entry>Description</entry>
   					<entry>Skin Parameters</entry>
   					<entry>CSS properties mapped</entry>
   					
   				</row>
   			</thead>
   			<tbody>
   				<row>
   					<entry>.range, .rich-dataFilterSlider-range</entry>
   					<entry>Define styles for the component range</entry>
   					<entry>subBorderColor, panelBorderColor</entry>
   					<entry>border-color</entry>
   				</row>
   				
   				<row>
   					<entry morerows="5">.slider-input-field, .rich-dataFilterSlider-input-field</entry>
   					<entry morerows="5">Define styles for the component input field</entry>
   					<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, border-right-color</entry>
   				</row>
   			</tbody>
   		</tgroup>
   	</table>
   	<table>
   		<title>Style classes (selectors) without skin parameters</title>
   		<tgroup cols="2">
   			<thead>
   				<row>
   					<entry>Class name</entry>
   					<entry>Description</entry>
   				</row>
   			</thead>
   			<tbody>
   				<row>
   					<entry>.trailer, .rich-dataFilterSlider-trailer</entry>
   					<entry>Define styles for the component trailer</entry>
   				</row>
   				
   				<row>
   					<entry>.track, .rich-dataFilterSlider-track</entry>
   					<entry>Define styles for the component track</entry>
   				</row>
   			</tbody>
   		</tgroup>
   	</table>
   	
   	<para>You can find all necessary information about style classes redefinition in 
   		<link linkend="customstyles">Definition of Custom Style Classes</link> 
   		section.</para>
   </section>
   <section>
      <title>Relevant Resources Links</title>
      <para>
         <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/dataFilterSlider.jsf?c=dataFilterSlider">On the component LiveDemo page</ulink> you can see the example of <emphasis role="bold">
            <property>&lt;rich:dataFilterSlider&gt;</property>
         </emphasis> usage and sources for the given example. </para>
  </section>
</section>
