> For the complete documentation index, see [llms.txt](https://docs.fact-finder.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.fact-finder.com/webcomponents-overview/web-components-4.x./api/navigation/facets-asn.md).

# Facets (ASN)

Build customizable facets, filters, and range sliders.

## Documentation

### Using the After Search Navigation

You can use the ASN by adding one line to your HTML code.

```html
<ff-asn></ff-asn>
```

Doing so will cause the ASN to use default HTML templates for all filters. You can customize the ASN's appearance by providing your own templates for its elements.

### Adding a filter group

```html
<ff-asn>
    <ff-asn-group></ff-asn-group>
</ff-asn>
```

To customize filter groups you add `ff-asn-group` elements. However, adding an empty `ff-asn-group` as in the example above has no effect. You will likely want to specify your own HTML template as shown in the following sections.

### Changing the group caption

If you want to change the group caption, you can annotate an HTML element with the `slot="groupCaption"` attribute. You can access the group's name through `{{group.name}}`.

Here is an example of how a custom group caption could be implemented:

```html
<ff-asn-group>
    <div slot="groupCaption" class="groupCaption">
        {{group.name}}<span class="filterArrowDown">↓</span>
    </div>
</ff-asn-group>
```

{% hint style="info" %}
The group caption will always be displayed at the top of the `ff-asn-group`. No other elements are altered in any way.
{% endhint %}

### Structuring the filter group

After Search Navigation groups offer various parts to interact with. They are marked with the `data-container` attribute.

There are two containers to hold the group's filter items:

* `data-container="detailedLinks"`
* `data-container="hiddenLinks"`

**detailedLinks** are the filter items which should be displayed immediately when the group receives data.

**hiddenLinks** are the filter items which should stay hidden until they are needed.

{% hint style="info" %}
You can configure how many items shall appear for each filter group through your FactFinder UI.
{% endhint %}

For further interaction there are:

* `data-container="showMore"`
* `data-container="showLess"`
* `data-container="removeFilter"`

These three elements are optional. If you don't define them in your template, they will be generated automatically.

**showMore** provides a clickable element to expand the **hiddenLinks**. It is only visible when there actually are **hiddenLinks** and these are not already expanded.

**showLess** provides the opposite function by collapsing expanded **hiddenLinks**.

**removeFilter** allows you to deselect all filters of the ASN group. It only appears when there are selected filters that can be deselected. That means that if there are only *implicitly* selected or *fixed* filters, the **removeFilter** element will not appear.

```html
<ff-asn-group>
    <div data-container="detailedLinks">
        <div data-content="detailedLinks">
            <!-- always visible items will be added here -->
        </div>
    </div>
    <div data-container="showMore">
        <!-- The "showMore" container will only be rendered if there are "hiddenLinks" in the FactFinder response.
             It disappears after being clicked and reappears after "showLess" was clicked. -->
        <span class="text">Show More</span>
    </div>

    <!-- The "hiddenLinks" and "showLess" containers are only rendered after "showMore" was clicked.
         They disappear after "showLess" was clicked. -->
    
    <div data-container="hiddenLinks">
        <div data-content="hiddenLinks">
            <!-- hidden items will be added here -->
        </div>
    </div>
    <div data-container="showLess">
        <span class="text">Show Less</span>
    </div>

    <div data-container="removeFilter">
        <span class="text">Reset filter group</span>
    </div>
</ff-asn-group>
```

{% hint style="info" %}
You can change the animation duration by changing the CSS `transition-duration` property of `ff-asn-group .ffw-wrapper`.
{% endhint %}

### Adding a filter element template

A filter group typically contains many elements. This could be for instance all colors or all manufacturers that apply to the current search result. You can customize the appearance of these entries by inserting the `ff-asn-group-element` into the related `ff-asn-group`.

The `ff-asn-group-element` provides two **slots** to distinguish between selected and unselected elements. Their content may be freely specified.

```html
<ff-asn-group>
    <ff-asn-group-element>
        <div slot="selected">
            <span class="filterCheckboxSelected"></span>
        <span class="filterName">{{element.name}} {{group.unit}}</span>
        </div>
        <div slot="unselected">
            <span class="filterCheckboxUnselected"></span>
        <span class="filterName">{{element.name}} {{group.unit}}</span>
        </div>
    </ff-asn-group-element>
</ff-asn-group>
```

The position of the `ff-asn-group-element` inside the `ff-asn-group` does not matter as long as it is a direct child. After initialization the element is removed from the DOM and saved for later usage.

The `{{data-binding}}` for the `ff-asn-group-element` allows accessing both scopes—the `{{element}}` scope and the `{{group}}` scope. This is especially important if you want to display the unit which is configured on the server side. In addition, `ff-asn-group-element` does support image binding.

### Restricting filter group templates to filter-style

If you set the `filter-style` attribute, the `ff-asn-group` acts as the default template for all groups that match this **filter-style**.

```html
<ff-asn>
    <!-- Acts as a template for all TREE configured filter groups -->
    <ff-asn-group filter-style="TREE"></ff-asn-group>

    <!-- Acts as a template for all MULTISELECT configured filter groups -->
    <ff-asn-group filter-style="MULTISELECT"></ff-asn-group>

    <!-- Acts as a template for all DEFAULT configured filter groups -->
    <ff-asn-group filter-style="DEFAULT"></ff-asn-group>
</ff-asn>
```

### Defining filter group templates for individual groups

By setting the `for-group` attribute you can apply a template to a single group identified by its source field name (`associatedFieldName`).

```html
<ff-asn>
    <!-- Acts as a template for a specific group called "Category" -->
    <ff-asn-group for-group="Category"></ff-asn-group>
</ff-asn>
```

{% hint style="info" %}
The `for-group` attribute has a higher priority than the `filter-style` attribute. This allows overriding certain groups even if you have a default template for that `filter-style`.
{% endhint %}

### Using native select box

If you require a native `select` element for the **hiddenLinks** instead of the "show more/show less" implementation, you can add the `select-box="true"` attribute to the `ff-asn-group` and add a `select` element with the attribute `data-container="hiddenLinks"`.

Note that you should also supply an `option` element that acts as a placeholder. This element typically reads "*More...*" and is initially shown before the `select` dropdown was opened for the first time.

You may optionally define a template for the regular `option` elements. It supports data binding as usual. Make sure to mark it with the `data-template` attribute.

```html
<ff-asn-group for-group="YourFieldName" select-box="true">
        <div data-container="detailedLinks">
            <div data-content="detailedLinks"></div>
        </div>

        <select data-container="hiddenLinks">
            <!-- The placeholder element. If none is provided, it will default to this: -->
            <option disabled hidden selected>More...</option>

            <!-- This template is optional. If you don't supply one, it defaults to:
                 <option data-template>{{element.name}} {{group.unit}} ({{element.recordCount}})</option> -->
            <option data-template>My Template {{element.name}} {{group.unit}}</option>
        </select>
</ff-asn-group>
```

### Searchable ASN groups

When the number of available filters in the ASN group is large, you may want to render a search field inside the group to allow the user to narrow down displayed filters.

To enable this feature you have to set the minimum number of filters required to render the search field in a given group. This is done by setting the `searchable-from` attribute on the `ff-asn` element. If you wish to exclude some groups from being searchable regardless of the number of filters, you can set the `not-searchable` attribute on such an `ff-asn-group` element.

**Search field template**

The default search field template is:

```html
<div slot="filterSearch"><input></div>
```

However, it can be changed by providing own content for the `filterSearch` slot in the `ff-asn-group` template. This template has to contain exactly one `input` element.

**Hit highlighting**

The searchable ASN groups feature comes with hit highlighting. Strings that match the search term will be wrapped with a `<span class="ffw-query">` element to allow you to apply appropriate styling.

In order to tell the template engine to interpret the HTML instead of render it as plain text you have to use triple curly braces for the group element's name. See Template Engine for details.

```html
<div slot="selected"><span>{{{element.name}}}</span></div>
```

### **Example**

Suppose you type `art` into *Manufacturer*'s search box.

{% stepper %}
{% step %}

### Setup

```html
<ff-asn searchable-from="31">
    <ff-asn-group for-group="Manufacturer">
        <div slot="filterSearch" class="customGroup1"><input></div>
        <ff-asn-group-element>
            <div slot="selected">
                <span>{{{element.name}}}</span>
            </div>
            <div slot="unselected">
                <span>{{{element.name}}}</span>
            </div>
        </ff-asn-group-element>
    </ff-asn-group>
    <ff-asn-group for-group="Usage" not-searchable>
        <div slot="filterSearch" class="customGroup2"><input></div>
    </ff-asn-group>
</ff-asn>
```

{% endstep %}

{% step %}

### Rendered HTML

```html
<ff-asn searchable-from="31">
    <ff-asn-group for-group="Manufacturer">
        <div class="ffw-asn-group-container">
            <div class="ffw-wrapper">
                <div slot="filterSearch" class="customGroup1"><input></div>
                <div class="ffw-asn-group-searchable-results">
                    <ff-asn-group-element>
                        <div class="ffw-asn-unselected">
                            <div slot="unselected">
                                <span>Sm<span class="ffw-query">art</span>wool</span>
                            </div>
                        </div>
                    </ff-asn-group-element>
                    ...
                </div>
            </div>
        </div>
    </ff-asn-group>
    <ff-asn-group for-group="Usage" not-searchable>
        <div class="ffw-asn-group-container">
            <div class="ffw-wrapper">
                <!-- no [slot="filterSearch"] container due to [not-searchable] attribute -->
                ...
            </div>
        </div>
    </ff-asn-group>
```

{% endstep %}
{% endstepper %}

### Sliders

FactFinder Web Components offer two kinds of sliders with different ways to interact. Sliders use their own ASN group element: `ff-asn-group-slider`. Both types of sliders require the same basic setup.

```html
<ff-asn>
    <ff-asn-group-slider>
        <div slot="groupCaption">
            <span>{{group.name}}</span>
        </div>

        <div data-container="removeFilter">
            <span>Reset Filter</span>
        </div>

        <!-- specifying decimal-places is optional and can be used to override default currency formatting -->
        <ff-slider-control submit-on-input="true" decimal-places="0">
            <div>
                <input data-control="1">  <!-- input for min value -->
                <input data-control="2">  <!-- input for max value -->
            </div>

            <!-- EITHER: One Touch Slider -->
            <ff-slider-one-touch></ff-slider-one-touch>

            <!-- OR: Classic slider -->
            <ff-slider>
                <div slot="slider1"></div>
                <div slot="slider2"></div>
            </ff-slider>
        </ff-slider-control>
    </ff-asn-group-slider>
</ff-asn>
```

Instead of detailed and hidden links, `ff-asn-group-slider` requires an `ff-slider-control` element. Here you define how the input fields for the upper and lower values shall be displayed and how they shall behave. You also specify whether you want to use the One Touch Slider or the classic slider.

**One Touch Slider**

```html
<ff-slider-one-touch></ff-slider-one-touch>
```

The One Touch Slider lets you control the min and max values together. This requires only one request to FactFinder for the selected range. You can still move each handle individually.

The One Touch Slider takes no further HTML template. It relies on CSS and inline styling. Inspect rendered HTML from an official or self-made demo for suitable customization rules.

The CSS classes involved are `ffw-triangle`, `ffw-slider-button-left`, `ffw-slider-button-right`, `ffw-line`, `ffw-selected-range`, `ffw-no-transition`, and `ffw-active`.

Also see `default-styles.css` in the Web Components distribution for further details.

{% hint style="info" %}
The `default-styles.css` file is only a human-readable reference. Web Components do not use this file. Changes to it have no effect.
{% endhint %}

**Classic slider**

```html
<ff-slider>
    <div slot="slider1"></div>
    <div slot="slider2"></div>
</ff-slider>
```

The classic slider allows you to manipulate one handle at a time. Each change issues a filter request to FactFinder.

The `ff-slider` takes two elements with a `slot` attribute. These elements are used as the min and max handles. Additional HTML in the template will be discarded.

### Rendered HTML

The following is a listing of possible HTML that is rendered by `ff-asn`. Notice the CSS classes starting with `ffw-`. These are applied automatically and shall provide you an easy way to apply custom style rules.

```html
<ff-asn align="vertical">
    <ff-asn-group for-group="Color" opened filter-style="DEFAULT">
        <div data-container="groupCaption">
            <div slot="groupCaption" class="groupCaption">Color</div>
        </div>
        <div class="ffw-asn-group-container">
            <div class="ffw-wrapper" opened>
                <div data-container="detailedLinks">
                    <div data-content="detailedLinks">
                        <ff-asn-group-element selected="false">
                            <div class="ffw-asn-unselected">
                                <div slot="unselected"><span>Blue</span></div>
                            </div>
                        </ff-asn-group-element>
                        <ff-asn-group-element selected="false">
                            <div class="ffw-asn-unselected">
                                <div slot="unselected"><span>Red</span></div>
                            </div>
                        </ff-asn-group-element>
                    </div>
                </div>
            </div>
        </div>
    </ff-asn-group>

    <ff-asn-group-slider filter-style="SLIDER" opened style="opacity: 1;" for-group="Price">
        <div data-container="groupCaption">
            <div slot="groupCaption">Price</div>
        </div>

        <div class="ffw-container">
            <div class="ffw-wrapper" opened>

                <ff-slider-control submit-on-input="true" style="opacity: 1;">
                    <div class="ffw-sliderSection">
                        <ff-slider step-size="1" submit-on-release="true">
                            <div style="position:relative;width:100%;height:100%" class="ffw-sliderBar">
                                <div class="ffw-slider1 ffw-sliderWrapper" style="position: absolute !important; left: 0; top: 0;" id="slider1-1">
                                    <div slot="slider1" class="sliderBtn cursorPointer"></div>
                                </div>
                                <div class="ffw-slider2 ffw-sliderWrapper" style="position: absolute !important; left: 188px; top: 0;" id="slider2-1">
                                    <div slot="slider2" class="sliderBtn cursorPointer"></div>
                                </div>
                            </div>
                        </ff-slider>
                        <div style="display: flex;justify-content: space-around;align-items: center">
                            <input data-control="1" style="width: 60px;">
                            <span style=" width: 20px; height: 2px; background-color: black;display: inline-block"></span>
                            <input data-control="2" style="width: 60px;">
                        </div>
                        <div class="resetFilter" data-container="removeFilter" style="display: none;">Reset Filter</div>
                    </div>
                </ff-slider-control>
            </div>
        </div>
    </ff-asn-group-slider>

    <ff-asn-group for-group="Manufacturer" opened filter-style="MULTISELECT">
        <div data-container="groupCaption">
            <div slot="groupCaption" class="groupCaption">Manufacturer</div>
        </div>
        <div class="ffw-asn-group-container">
            <div class="ffw-wrapper" opened>
                <div data-container="detailedLinks">
                    <div data-content="detailedLinks">
                        <ff-asn-group-element selected="true">
                            <div class="ffw-asn-selected">
                                <div slot="selected"><span>Lowa</span></div>
                            </div>
                        </ff-asn-group-element>
                        <ff-asn-group-element selected="false">
                            <div class="ffw-asn-unselected">
                                <div slot="unselected"><span>AKU</span></div>
                            </div>
                        </ff-asn-group-element>
                    </div>
                </div>
                <div data-container="showMore" opened>Show More</div>

                <div data-container="hiddenLinks" style="height: 0; overflow: hidden;">
                    <div data-content="hiddenLinks">
                        <ff-asn-group-element selected="false">
                            <div class="ffw-asn-unselected">
                                <div slot="unselected"><span>Bogs</span></div>
                            </div>
                        </ff-asn-group-element>
                        <ff-asn-group-element selected="false">
                            <div class="ffw-asn-unselected">
                                <div slot="unselected"><span>Castelli</span></div>
                            </div>
                        </ff-asn-group-element>
                    </div>
                </div>
                <div data-container="showLess" style="overflow: hidden; height: 0;">Show Less</div>

                <div class="resetFilter" data-container="removeFilter">Reset Filter</div>
            </div>
        </div>
    </ff-asn-group>
</ff-asn>
```

### Remove all filters

Sometimes you may want to reset all filters at once and go back to the original search result. For this case there is a dedicated element which you can place anywhere on your page. This element will trigger a new search request with the current search query.

The `ff-asn-remove-all-filter` element has the following properties:

**`show-always`**

With the `show-always` property you can define whether the element is always visible or only when at least one removable filter is set. The default value is `false`.

**`remove-params`**

Setting this attribute removes all parameters, except the search query, from the resetting request. When not set, only parameters applied by the ASN are removed. Other parameters, such as `products-per-page`, `sort`, and custom parameters, remain unaffected. The default value is `false`.

**`keep-category-path`**

{% hint style="warning" %}
This attribute is deprecated and no longer required. To implement category pages use `<ff-communication category-page="...">` instead. See Category Pages for details.
{% endhint %}

Setting the `keep-category-path` property preserves the category filters. The default value is `false`.

```html
<ff-asn-remove-all-filter remove-params show-always keep-category-path>
    Reset Filters
</ff-asn-remove-all-filter>
```

#### Dispatching data manually

If you need to manually dispatch data, for instance when the component is subscribed to a custom topic, you can use `ResultDispatcher` to achieve that. The ASN component requires the `groups` property's content from the FactFinder response. No additional preparation is needed.

```javascript
function dispatchAsnCustomTopic() {
    factfinder.communication.ResultDispatcher.dispatch(
        factfinder.communication.EventAggregator.currentSearchResult.groups,
        {},
        'customTopic'
    );
}
```

## Demo

Try the [Facets demo](https://search-web-components.fact-finder.de/demos/4.x/ff-asn).

## API code

### `ff-asn`

<details>

<summary>Properties</summary>

| Name                                                                             | Description                                                                                                                                                                                                                                                                               |
| -------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **align** (String) Options: `"vertical"`, `"horizontal"` (default: `"vertical"`) | The alignment of the After Search Navigation.                                                                                                                                                                                                                                             |
| **asn-groups** (Array)                                                           | The data for all filter groups/facets.                                                                                                                                                                                                                                                    |
| **searchable-from** (Number) (default: Infinity)                                 | The minimum number of filters in a group to render search field. The value refers to the sum of detailed and hidden links.                                                                                                                                                                |
| **subscribe** (String) Options: `"true"`, `"false"` (default: `"true"`)          | Defines if component should automatically subscribe to asn event and use ASN data retrieved from FactFinder.                                                                                                                                                                              |
| **topic** (String)                                                               | Defines if the component should subscribe to a custom topic instead of the default one. Please note that in this case you need to manually dispatch ASN data. For more information regarding the data's structure, please refer to Dispatching data manually in the ff-asn documentation. |

</details>

<details>

<summary>Events</summary>

| Name            | Description                                                                                                                                  |
| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------- |
| **dom-updated** | This event is triggered when the element has received new data and the template for this element and all sub elements have been punched out. |

</details>

### `ff-asn-group`

<details>

<summary>Properties</summary>

| Name                                                                      | Description                                                                                                                                                                                                                                               |
| ------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **opened** (Boolean)                                                      | Determines if the filter group is expanded. If you want to have a group opened by default: `<ff-asn-group opened>` does the trick.                                                                                                                        |
| **collapsible** (String) Options: `"true"`, `"false"` (default: `"true"`) | Determines, if the filter group is collapsible.                                                                                                                                                                                                           |
| **for-group** (String) (default: `"all"`)                                 | Determines which filter group the template should be applied to. If set to `"all"`, the template is applied to all groups if no other template matches the requirements. Otherwise, its value corresponds to the source field name (associatedFieldName). |
| **group** (Object)                                                        | The data for the filter group.                                                                                                                                                                                                                            |
| **filter-style** (String)                                                 | With the filter-style property it is possible to use the ff-asn-group element as a template for all groups which match the filter style. (TREE, DEFAULT, MULTISELECT, SINGLESELECT)                                                                       |
| **select-box** (String) Options: `"true"`, `"false"` (default: `"false"`) | Use this when the hiddenLinks should be an HTML select element                                                                                                                                                                                            |
| **disable-auto-expand** (Boolean)                                         | Prevents group from being automatically expanded when it contains any active filters.                                                                                                                                                                     |
| **not-searchable** (Boolean) (default: false)                             | Prevents group from being searchable even if it satisfies searchable-from condition.                                                                                                                                                                      |

</details>

<details>

<summary>Methods</summary>

| Name                                                | Description                                                                |
| --------------------------------------------------- | -------------------------------------------------------------------------- |
| **toggle(animate?: Boolean)**                       | Toggles the asn-group                                                      |
| **show(animate?: Boolean)**                         | Opens the asn-group                                                        |
| **hide(animate?: Boolean)**                         | Closes the asn-group                                                       |
| **showDetailedLinksContainer(animate?: Boolean)**   | Opens the detailedLink container. Parameter animate: Boolean is optional.  |
| **hideDetailedLinksContainer(animate?: Boolean)**   | Close the detailedLink container. Parameter animate: Boolean is optional.  |
| **toggleDetailedLinksContainer(animate?: Boolean)** | Toggle the detailedLink container. Parameter animate: Boolean is optional. |
| **showHiddenLinksContainer(animate?: Boolean)**     | Opens the hiddenLink container. Parameter animate: Boolean is optional.    |
| **hideHiddenLinksContainer(animate?: Boolean)**     | Close the hiddenLink container. Parameter animate: Boolean is optional.    |
| **toggleHiddenLinksContainer(animate?: Boolean)**   | Toggle the hiddenLink container. Parameter animate: Boolean is optional.   |

</details>

### `ff-asn-group-element`

<details>

<summary>Properties</summary>

| Name                                    | Description                                                                                          |
| --------------------------------------- | ---------------------------------------------------------------------------------------------------- |
| **selected** (Boolean) (default: false) | Rendered whenever element is selected.                                                               |
| **fixed** (Boolean) (default: false)    | Rendered when element is defined in category-page. Element cannot be deselected.                     |
| **implicit** (Boolean) (default: false) | Rendered when FactFinder considers the element as implicitly selected. Element cannot be deselected. |
| **element** (Object) (default: empty)   | The filter data.                                                                                     |
| **group** (Object) (default: empty)     | The filter group data.                                                                               |

</details>

<details>

<summary>Methods</summary>

| Name                      | Description                                                                                          |
| ------------------------- | ---------------------------------------------------------------------------------------------------- |
| **clone(group, element)** | Returns a copy of the group element with the specified group and element to provide the new context. |

</details>

### `ff-asn-group-slider`

<details>

<summary>Properties</summary>

| Name                                                                      | Description                                                                                                                                                                                                                                               |
| ------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **opened** (Boolean)                                                      | Determines if the filter group is expanded. If you want to have a group opened by default: `<ff-asn-group-slider opened>` does the trick.                                                                                                                 |
| **collapsible** (String) Options: `"true"`, `"false"` (default: `"true"`) | Determines, if the filter group is collapsible.                                                                                                                                                                                                           |
| **for-group** (String) (default: `"all"`)                                 | Determines which filter group the template should be applied to. If set to `"all"`, the template is applied to all groups if no other template matches the requirements. Otherwise, its value corresponds to the source field name (associatedFieldName). |
| **group** (Object)                                                        | The data for the filter group.                                                                                                                                                                                                                            |
| **filter-style** (String)                                                 | Read only property, always set to `"SLIDER"`                                                                                                                                                                                                              |
| **disable-auto-expand** (Boolean)                                         | Prevents group from being automatically expanded when it contains any active filters.                                                                                                                                                                     |

</details>

<details>

<summary>Methods</summary>

| Name                          | Description                  |
| ----------------------------- | ---------------------------- |
| **toggle(animate?: Boolean)** | Toggles the asn-group-slider |
| **show(animate?: Boolean)**   | Opens the asn-group-slider   |
| **hide(animate?: Boolean)**   | Closes the asn-group-slider  |

</details>

### `ff-slider` / `ff-slider-one-touch`

<details>

<summary>Properties</summary>

| Name                            | Description                                                                                                                     |
| ------------------------------- | ------------------------------------------------------------------------------------------------------------------------------- |
| **step-size** (Number)          | Determines step size used when the slider is dragged.                                                                           |
| **selected-min-value** (Number) | The currently selected minimum value. Cannot be less than absolute-min-value.                                                   |
| **selected-max-value** (Number) | The currently selected maximum value. Cannot be more than absolute-max-value.                                                   |
| **absolute-min-value** (Number) | Indicates the minimum lower end e.g. if set to 50, dragging the slider button to the most left will result in a value of 50.    |
| **absolute-max-value** (Number) | Indicates the maximum upper end e.g. if set to 500, dragging the slider button to the most right will result in a value of 500. |
| **unit** (String)               | The unit of measurement. E.g. €                                                                                                 |

</details>

<details>

<summary>Methods</summary>

| Name         | Description                                      |
| ------------ | ------------------------------------------------ |
| **submit()** | Send the filter request with the current values. |

</details>

### `ff-slider-one-touch`

<details>

<summary>Properties</summary>

| Name                              | Description                                                                                                                                                                                              |
| --------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **ratio** (Number) (default: 0.5) | The height-to-width ratio of the triangle that controls the slider's values. A value of 1 means height and width will be the same. A value of 0.5 means the triangle will be half as high as it is wide. |

</details>

### `ff-slider`

<details>

<summary>Properties</summary>

| Name                                                                 | Description                                                                                    |
| -------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------- |
| **submit-on-release** (Boolean) Options: true, false (default: true) | If this is set to true, a filter request is made immediately upon releasing the slider button. |

</details>

### `ff-slider-control`

<details>

<summary>Properties</summary>

| Name                                                                                | Description                                                                                                                                                                        |
| ----------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **disable-input-fields** (String) Options: `"true"`, `"false"` (default: `"false"`) | If this attribute is set to false, the input fields accept values. If set to true, the fields are disabled by setting the disabled attribute on them. Then they cannot be focused. |
| **submit-on-input** (String) Options: `"true"`, `"false"` (default: `"false"`)      | If this is set to true, a filter request is made immediately upon key stroke instead of waiting for an ENTER key press.                                                            |
| **unit** (String)                                                                   | The unit of measurement. E.g. €                                                                                                                                                    |
| **decimal-places** (Number)                                                         | The number of fraction digits to use in the slider inputs. If set, it takes precedence over the currency formatting. Otherwise, currency fields rely on ISO 4217.                  |

</details>

### `ff-asn-remove-all-filter`

<details>

<summary>Properties</summary>

| Name                                          | Description                                                                                                                                                                                                                                                                                               |
| --------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **show-always** (Boolean)                     | Defines if the element is only visible when at least one removable filter is set, or always.                                                                                                                                                                                                              |
| **remove-params** (Boolean)                   | Setting this attribute removes all parameters (except the search query) from the resetting request. When not set, only parameters that were applied by the ASN (recognizable by the filter\* prefix) are removed. Other parameters like products-per-page, sort and custom parameters will be unaffected. |
| **(DEPRECATED) keep-category-path** (Boolean) | (Use ff-communication/category-page instead to implement Category Pages.) Setting this property preserves the category filters.                                                                                                                                                                           |

</details>


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://docs.fact-finder.com/webcomponents-overview/web-components-4.x./api/navigation/facets-asn.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.