Primary Filters (vviinn-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.

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-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-filters::part(name): Styling Specific Elements.

Part	Description
`filters-footer`	Wrapper for the sub filters.
`filters-footer-list`	List of sub filters.
`filters-list`	List of main filters.
`filters-main-button`	Main filter button.
`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-sub-row`	Row of the sub filters.
`filters-wrapper`	Wrapper for the main 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-filters or a parent element: CSS Variables.

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