Range

The range filter allows users to select a numeric range using min/max values and an optional step. It is ideal for filtering values like price, rating, etc.

Supports all layouts: inline, vertical, and popover.

Від

До

Component API

Prop	Type	Description
type	'range'	Must be set to 'range'
fromPlaceHolder	string	Placeholder for the "from" input
toPlaceHolder	string	Placeholder for the "to" input
layout	'inline' | 'vertical' | 'popover'	Display style of the field
label	string	Label displayed with the field

Examples

Inline Range Filter

Compact layout with options inside a popover:

<FilterField
    name="price"
    type="range"
    label="Price"
    layout="inline"
    :fromPlaceHolder="'Min price'"
    :toPlaceHolder="'Max price'"
    v-model="priceRange"
/>

Vertical Radio Filter

Stacked options for sidebar or filter panel:

<FilterField
    name="price"
    type="range"
    label="Price"
    layout="vertical"
    :fromPlaceHolder="'Min price'"
    :toPlaceHolder="'Max price'"
    v-model="priceRange"
/>

Price

-

Popover Range Filter

Dropdown version, best for compact toolbars:

<FilterField
    name="price"
    type="range"
    label="Price"
    layout="popover"
    :fromPlaceHolder="'Min price'"
    :toPlaceHolder="'Max price'"
    v-model="priceRange"
/>

Від

До