### Create new RichFaces Documentation Jira issue

Summary
255 characters left
Description
Environment
This will launch the RichFaces Jira page - to complete your feedback please login if needed, and submit the Jira.

JBoss.org Community Documentation

- Prev
- Next

### 6.6.5. < rich:dataFilterSlider > available since 3.0.0

expand all

#### 6.6.5.1. Description

A slider-based action component is used for filtering table data.

Figure 6.26. <rich:dataFilterSlider> component

#### 6.6.5.2. Key Features

- Filter any UIData based component in dependency on its child's values

- Fully skinnable control and input elements

- Optional value text field with an attribute-managed position

- Optional disablement of the component on a page

- Optional toolTip to display the current value while a handle is dragged

- Dragged state is stable after the mouse moves

- Optional manual input possible if a text input field is present

- Validation of manual input

#### 6.6.5.3. Details of Usage

The dataFilterSlider component is bound to some UIData component using the "for" attribute and filters data in a table.

Example:

    ...

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

    ...

In this example other two attributes are used for filtering:

- "forValRef" 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.

- "filterBy" 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.

"handleValue" is an attribute for keeping the current handle position on the dataFilterSlider component. Based on the current value, appropriate values obtained from a getter method defined in "filterBy" are filtered.

One more important attribute is a "storeResults" one that allows the dataFilterSlider component to keep UIData target object in session.

If it's necessary the component submits a form on event of a handle state changing, use the "submitOnSlide" attribute. When the attribute definition is `"true"`, submission on this event is defined.

Information about the "process" attribute usage you can find in the "Decide what to process " guide section.

#### 6.6.5.4. Reference Data

Table of <rich:dataFilterSlider> attributes.

Table 6.37. Component Identification Parameters

Name | Value
--- | ---
component-type | org.richfaces.DataFilterSlider
component-class | org.richfaces.component.html.HtmlDataFilterSlider
component-family | org.richfaces.DataFilterSlider
renderer-type | org.richfaces.DataFilterSliderRenderer
tag-class | org.richfaces.taglib.dataFilterSliderTag

Table 6.38. Style classes (selectors) with the corresponding skin parameters

Class (selector) name | Description | Skin Parameters | CSS properties mapped
--- | --- | --- | ---
.range, .rich-dataFilterSlider-range | Define styles for the component range | subBorderColor, panelBorderColor | border-color
.slider-input-field, .rich-dataFilterSlider-input-field | Define styles for the component input field | controlBackgroundColor | background-color
generalFamilyFont | font-family
generalSizeFont | font-size
controlTextColor | color
panelBorderColor | border-color
subBorderColor | border-bottom-color, border-right-color

Table 6.39. Style classes (selectors) without skin parameters

Class name | Description
--- | ---
.trailer, .rich-dataFilterSlider-trailer | Define styles for the component trailer
.track, .rich-dataFilterSlider-track | Define styles for the component track

You can find all necessary information about style classes redefinition in Definition of Custom Style Classes section.

#### 6.6.5.5. Relevant Resources Links

On the component LiveDemo page you can see the example of <rich:dataFilterSlider> usage and sources for the given example.

- Prev6.6.4. < rich:dataDefinitionList > ...
- Top of page
- Front page
- Next6.6.6. < rich:dataGrid > ...