Range component

The Range component implements the range for filtering rows in a grid. Visually, this component represents two input fields of date or text type, for entering the "from" and "to" range limits.

Options

Option
Description
Type
Default Value
class
Path to the PHP class responsible for the backend implementation of the component.
String
Magento\Ui\Component\Filters\Type\Range
component
The path to the component’s .js file in terms of RequireJS.
String
Magento_Ui/js/grid/filters/range
isRange
Defines range filter.
Boolean
true
rangeType
Defines what kind of input elements the range contains.<br/>For example, if the value is date, then range includes two date fields.
String
-
template
Path to the component’s .html template.
String
ui/grid/filters/elements/group

Source files

Extends Multiline:

Examples

DateRange

This is an example of how to add a date range filter type:

<listing>
    <columns>
        <column name="period">
            <settings>
                <filter>dateRange</filter>
                <label translate="true">Period</label>
            </settings>
        </column>
    </columns>
</listing>

Result

DateRange filter type

TextRange

This is an example of how to add a text range filter type:

<listing>
    <columns>
        <column name="size">
            <settings>
                <filter>textRange</filter>
                <label translate="true">Size</label>
            </settings>
        </column>
    </columns>
</listing>

Result

TextRange filter type

Methods and events

The following API methods are available: