---
title: Coveo Dynamic Distance Facet Range
slug: '3212'
canonical_url: https://docs.coveo.com/en/3212/
collection: coveo-for-sitecore-v5
source_format: adoc
---
# Coveo Dynamic Distance Facet Range

> **Legacy feature**
>
> The Coveo Hive Framework is now in maintenance mode and is no longer recommended for new implementations.
> 
> To build new search experiences, use one of Coveo's more modern, lightweight, and responsive libraries.
> To get started, see the [Build search](https://docs.coveo.com/en/2473.md) article.
[Available since Coveo for Sitecore 5.0.642.2]

Implements the [Coveo JavaScript Search Framework](https://docs.coveo.com/en/187.md) [DynamicFacetRange](https://coveo.github.io/search-ui/components/dynamicfacetrange.html) component to display a [facet](https://docs.coveo.com/en/198.md) whose values are expressed as distance ranges.
The **Coveo Dynamic Distance Facet Range** is an evolution over the [Coveo Distance Facet Range](https://docs.coveo.com/en/3026.md) rendering, particularly because it implements [Dynamic Navigation Experience](https://docs.coveo.com/en/3383.md).

The **DynamicFacetRange** extends the [DynamicFacet](https://coveo.github.io/search-ui/components/dynamicfacet.html) component and supports most of its component options.

## Usage notes

* To use the **{doctitle}** rendering, you must:

** Add the [Coveo Distance Resources rendering](https://docs.coveo.com/en/2272.md) and a [Position Provider rendering](https://docs.coveo.com/en/2999.md) to automatically calculate the user-item distance and store it in a field.

** Select the name of the `Distance field` to store the distances in.
By default, Coveo for Sitecore suggests `distance` as the name of this field (which comes from the `List Value Parameter` item located in the `/sitecore/system/Settings/Indexing and Search/Coveo/Distance Field Names` folder).
Refrain from creating custom `List Value Parameter` items: these items are either not located by the Coveo for Sitecore data source or deleted during an upgrade.

* To use the **{doctitle}** rendering with custom numeric ranges, create a content tree structure, such as the one below, containing a `Custom Numeric Ranges` item with children `Numeric Range` items.
This structure can be placed anywhere in the content tree.
You'll reference the location of the `Custom Numeric Ranges` item in the `Facet value ranges` data source option (see [Configure custom ranges for a date range or numeric range facet](https://docs.coveo.com/en/2782.md)).

![Dyn Numeric Facet Range required items | Coveo for Sitecore 5](https://docs.coveo.com/en/assets/images/c4sc-v5/dynamic-numeric-facet-range-required-items.png)

* To benefit from the automatic facet reordering functionality, group **{doctitle}** renderings and other dynamic facets (for example, [Coveo Dynamic Facets](https://docs.coveo.com/en/3206.md) and [Coveo Dynamic Hierarchical Facets](https://docs.coveo.com/en/3209.md)) within a [Coveo Dynamic Facet Manager](https://docs.coveo.com/en/3207.md) (see [Use dynamic facets](https://docs.coveo.com/en/2917.md)).

* **{doctitle}** renderings may also be used as standalone facets without a **Coveo Dynamic Facet Manager**.

* Any change to the facet range selection triggers a new Search API call.

* You can [display a dynamic facet only when a specific value is selected in another facet](https://docs.coveo.com/en/2788.md#example-2-display-a-facet-only-when-a-specific-value-is-selected-in-its-parent).

* You can [customize the CSS](https://docs.coveo.com/en/2342.md) associated with this rendering.

## Insertion location

<div>
<h3>Coveo Hive</h3>
  
The **Coveo Dynamic Distance Facet Range** rendering is an Allowed Control in the following placeholder(s): `Dynamic Facets`, `Facets`

  <video width="690" height="335" controls="">
  <source src="https://docs.coveo.com/en/assets/images/c4sc-v5/Dynamicdistance-facet-range-hive.mp4" type="video/mp4" />
  Your browser doesn't support the video tag.
</video>
  <div class="figure-caption">Example insertion sequence for the **Coveo Dynamic Distance Facet Range** rendering.
  </div>
</div>
<div>
<h3>Coveo Hive SXA</h3>
  
When you add the **Coveo Dynamic Facet Manager** SXA rendering, this adds a `coveouidynamicfacetssxa` placeholder. Insert your **Coveo Dynamic Distance Facet Range** rendering in this `coveouidynamicfacetssxa` placeholder.

  <video width="690" height="335" controls="">
  <source src="https://docs.coveo.com/en/assets/images/c4sc-v5/Dynamicdistance-facet-range-sxa.mp4" type="video/mp4" />
  Your browser doesn't support the video tag.
</video>
  <div class="figure-caption">Example insertion sequence for the **Coveo Dynamic Distance Facet Range** rendering.
  </div>
</div>

## Data source options

The following table lists the available data source options for this rendering.

| Option name | Description |
|---|---|
| Title | See the [title](https://coveo.github.io/search-ui/components/dynamicfacet.html#options.title) component option. |
| Distance field | See the [field](https://coveo.github.io/search-ui/components/dynamicfacet.html#options.field) component option. |
| Facet ID | See the [id](https://coveo.github.io/search-ui/components/dynamicfacet.html#options.id-1) component option. |
| Depends on | The data source `Facet ID` value of another facet that this facet depends on. See the [dependsOn](https://coveo.github.io/search-ui/components/dynamicfacet.html#options.dependson) component option. |
| Enable collapse | See the [`enableCollapse`](https://coveo.github.io/search-ui/components/dynamicfacet.html#options.enablecollapse) component option. |
| Facet collapsed by default | See the [collapsedByDefault](https://coveo.github.io/search-ui/components/dynamicfacet.html#options.collapsedbydefault) component option. |
| Enable search for the facet | See the [enableFacetSearch](https://coveo.github.io/search-ui/components/dynamicfacet.html#options.enablefacetsearch) component option. |
| Scroll back to the top of the page on interaction | See the [enableScrollToTop](https://coveo.github.io/search-ui/components/dynamicfacet.html#options.enablescrolltotop) component option. |
| Exclude folded result parents | The path to use as the path prefix for every query. |
| Notify the breadcrumb component | See the [includeInBreadcrumb](https://coveo.github.io/search-ui/components/dynamicfacet.html#options.includeinbreadcrumb) component option. |
| Facet accuracy determined by the number of scanned results | See the [injectionDepth](https://coveo.github.io/search-ui/components/dynamicfacet.html#options.injectiondepth) component option. |
| Prepend facet search queries with a wildcard | See the [useLeadingWildcardInFacetSearch](https://coveo.github.io/search-ui/components/dynamicfacet.html#options.useleadingwildcardinfacetsearch) component option. |
| Facet value ranges | Specifies whether to use automatically generated numeric ranges or custom numeric ranges created in Sitecore. |
| DOM unique ID | {empty} -- Randomly generated HTML element ID. -- |
| Additional data attributes | {empty} -- Allows [use of the Coveo JavaScript Search Framework **DynamicFacetRange** component options](https://docs.coveo.com/en/2776.md) that aren't directly available in the data source. -- |

## Sample generated HTML and corresponding visual output

```html
<div id="coveod7e994f3" class="CoveoDynamicFacetRange" data-title="Store Location Distance"
data-injection-depth="1000" data-use-leading-wildcard-in-facet-search="false"
data-prebind-field="fieldTranslator" data-field="@distance" data-ranges="[
{"start":"0","end":"50","endInclusive":true,"label":"0 - 50 km"},
{"start":"50","end":"100","endInclusive":true,"label":"50 - 100 km"},
{"start":"100","end":"200","endInclusive":true,"label":"100 - 200 km"},
{"start":"200","end":"100000000","endInclusive":true,"label":"200+ km"}]"
data-value-format="numeric" data-applied-prebind="true">
```

![Dyn Distance Facet Range example | Coveo for Sitecore 5](https://docs.coveo.com/en/assets/images/c4sc-v5/dynamic-distance-facet-range-example.png)