Range component | Adobe Commerce Developer Guide

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.

Configuration 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. 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:

buildChildren() - create a configuration for the child components.
clear() - clear child elements data.
hasData() - check if some children element has data.