Extended Filters (vviinn-extended-filters)

Generated from vviinn-widgets 2.228.0, the latest release when these docs were built. If you pin an older version, some of these may not be in it yet — check the Changelog.

Properties

Set them as HTML attributes.

currency-sign

The currency sign displayed after price values

Type: string

locale

Locale for text localization

Type: "de-DE" | "en-US"

mode

Type: "button" | "modal" | "preview" | "preview-inline" · Default: "button"

search-threshold

Minimum number of filter options required to show search bar in preview-inline mode. Set to 0 to always show, or a high number to never show.

Type: number · Default: 0

show-header

Type: boolean · Default: true

show-interval-inputs

Show editable input fields in interval filters instead of readonly labels

Type: boolean · Default: false

Events

Listen with document.addEventListener(). The pages under Events describe the data each event carries.

Event	Description
`vviinnFiltersChanged`	The filter's state changes
`vviinnFilterTriggered`	—

Slots

Replace texts and icons with your own content: Replace Widget Content.

Slot	Description
`vviinn-extended-filters-apply`	Title of Apply Button.
`vviinn-extended-filters-no-filters`	Message shown when no filters are available.
`vviinn-extended-filters-reset`	Title of Reset Button.
`vviinn-extended-filters-title`	Text on widget's header.
`vviinn-filters-search-icon`	Custom icon for the search input.
`vviinn-range-filter-from-label`	Label text for the "From" input field in range filters.
`vviinn-range-filter-to-label`	Label text for the "To" input field in range filters.

Shadow Parts

Style these elements with vviinn-extended-filters::part(name): Styling Specific Elements.

Part	Description
`extended-filters-actions`	Wrapper for the actions.
`extended-filters-apply`	Apply button.
`extended-filters-header`	Header of the modal.
`extended-filters-list`	List of filters.
`extended-filters-main`	Wrapper for the main modal content.
`extended-filters-main-button`	Main button of the row.
`extended-filters-modal`	Modal itself.
`extended-filters-modal-close`	Close button of the modal.
`extended-filters-modal-wrapper`	Wrapper for the modal.
`extended-filters-no-filters`	No filters message container.
`extended-filters-reset`	Reset button.
`extended-filters-row`	Row of the filters.
`extended-filters-row-wrapper`	Wrapper for the row.
`extended-filters-selected-wrapper`	Wrapper for the selected options.
`extended-filters-sub-list`	List of sub filters.
`extended-filters-title`	Title heading (h2) of the modal.
`filters-option-button`	Button of the sub filter.
`filters-option-color-dot`	Color Dot of the sub filter.
`filters-option-icon-wrapper`	Icon Wrapper of the sub filter.
`filters-option-image`	Image of the sub filter.
`filters-option-text`	Text of the sub filter.
`filters-search-container`	Container wrapping search input and filter list.
`filters-search-icon`	Icon wrapper for the search input.
`filters-search-input`	Search input field.
`filters-search-input-container`	Container for the search input with icon.
`filters-sub-row`	Row of the sub filters.
`histogram`	Wrapper itself.
`histogram-bar`	Bar of the histogram.
`histogram-from-input`	Input field for the minimum value.
`histogram-from-slider`	Slider for the minimum value.
`histogram-input-container`	Container for the input field (when showIntervalInputs is true).
`histogram-input-label`	Label text for the input (From/Till).
`histogram-label`	Label for the histogram (when showIntervalInputs is false).
`histogram-label-wrapper`	Wrapper for the labels/inputs.
`histogram-range-container`	Container for the range sliders.
`histogram-sliders-control`	Container for the range sliders control.
`histogram-to-input`	Input field for the maximum value.
`histogram-to-slider`	Slider for the maximum value.

CSS Custom Properties

Set them on vviinn-extended-filters or a parent element: CSS Variables.

Property	Description
`--font-family`	The font family of the filters.