# Coveo DynamicFacetRange Component (CoveoDynamicFacetRange)

A `DynamicFacetRange` is a facet whose values are expressed as ranges.

You must set the `field` option to a value targeting a numeric or date field in your index for this component to work.

This component extends the `DynamicFacet` component and supports all `DynamicFacet` options except:

- `enableFacetSearch`
- `useLeadingWildcardInFacetSearch`
- `enableMoreLess`
- `valueCaption`

Not supported in

  Coveo for Salesforce Free

Available since

  October 2019 Release (v2.7219)

## Index

### Methods

- collapse
- debugInfo
- deselectMultipleValues
- deselectValue
- disable
- enable
- enableFreezeCurrentValuesFlag
- enableFreezeFacetOrderFlag
- expand
- focusValueAfterRerender
- getBindings
- getCaptionForStringValue
- hasSelectedValue
- reset
- selectMultipleValues
- selectValue
- showLessValues
- showMoreValues
- toggleCollapse
- toggleSelectValue
- get

### Properties

- bind
- componentOptionsModel
- componentStateModel
- disabled
- logger
- queryController
- queryStateModel
- root
- searchInterface
- ID

### Accessors

- usageAnalytics

### Component Options

- currencySymbol
- numberOfDecimals
- ranges
- sortOrder
- valueFormat
- valueSeparator

### Constructors

- constructor

## Methods

### collapse

- collapse(): void

- Inherited from DynamicFacet.collapse

  - Defined in ui/DynamicFacet/DynamicFacet.ts :553

  Collapses the facet, displaying only its currently selected values.

  #### Returns void

### debugInfo

- debugInfo(): any

- Inherited from BaseComponent.debugInfo

  - Defined in ui/Base/BaseComponent.ts :41

  Return the debug info about this component.

  #### Returns any

### deselectMultipleValues

- deselectMultipleValues(values: string[]): void

- Inherited from DynamicFacet.deselectMultipleValues

  - Defined in ui/DynamicFacet/DynamicFacet.ts :436

  Deselects multiple values in this facet.

  Does not trigger a query automatically. Does not update the visual of the facet until a query is performed.

  #### Parameters

  - ##### values: string[]

    The names of the facet values to deselect.

  #### Returns void

### deselectValue

- deselectValue(value: string): void

- Inherited from DynamicFacet.deselectValue

  - Defined in ui/DynamicFacet/DynamicFacet.ts :415

  Deselects a single value in this facet.

  Does not trigger a query automatically. Does not update the visual of the facet until a query is performed.

  #### Parameters

  - ##### value: string

  #### Returns void

### disable

- disable(): void

- Inherited from BaseComponent.disable

  - Defined in ui/Base/BaseComponent.ts :52

  Disable the component. Normally this means that the component will not execute handlers for the framework events (query events, for example). Components are enabled by default on creation.

  #### Returns void

### enable

- enable(): void

- Inherited from BaseComponent.enable

  - Defined in ui/Base/BaseComponent.ts :61

  Enable the component. Normally this means that the component will execute handlers for the framework events (query events, for example). Components are enabled by default on creation.

  #### Returns void

### enableFreezeCurrentValuesFlag

- enableFreezeCurrentValuesFlag(): void

- Inherited from DynamicFacet.enableFreezeCurrentValuesFlag

  - Defined in ui/DynamicFacet/DynamicFacet.ts :573

  Sets a flag indicating whether the facet values should be returned in their current order.

  Setting the flag to `true` helps ensuring that the values do not move around while the end-user is interacting with them.

  The flag is automatically set back to `false` after a query is built.

  #### Returns void

### enableFreezeFacetOrderFlag

- enableFreezeFacetOrderFlag(): void

- Inherited from DynamicFacet.enableFreezeFacetOrderFlag

  - Defined in ui/DynamicFacet/DynamicFacet.ts :586

  For this method to work, the component has to be the child of a DynamicFacetManager component.

  Sets a flag indicating whether the facets should be returned in their current order.

  Setting the flag to `true` helps ensuring that the facets do not move around while the end-user is interacting with them.

  The flag is automatically set back to `false` after a query is built.

  #### Returns void

### expand

- expand(): void

- Inherited from DynamicFacet.expand

  - Defined in ui/DynamicFacet/DynamicFacet.ts :537

  Expands the facet, displaying all of its currently fetched values.

  #### Returns void

### focusValueAfterRerender

- focusValueAfterRerender(value: string): void

- Inherited from DynamicFacet.focusValueAfterRerender

  - Defined in ui/DynamicFacet/DynamicFacet.ts :467

  Keyboard focuses a value once it has been re-rendered.

  #### Parameters

  - ##### value: string

    The name of the facet value to focus

  #### Returns void

### getBindings

- getBindings(): IComponentBindings

- Inherited from Component.getBindings

  - Defined in ui/Base/Component.ts :328

  Return the bindings, or environment, for the current component.

  #### Returns IComponentBindings

### getCaptionForStringValue

- getCaptionForStringValue(value: string): string

- Inherited from DynamicFacet.getCaptionForStringValue

  - Defined in ui/DynamicFacet/DynamicFacet.ts :477

  Returns the configured caption for a desired facet value.

  #### Parameters

  - ##### value: string

    The string facet value whose caption the method should return.

  #### Returns string

### hasSelectedValue

- hasSelectedValue(value: string): boolean

- Inherited from DynamicFacet.hasSelectedValue

  - Defined in ui/DynamicFacet/DynamicFacet.ts :424

  Determines whether the specified value is selected in the facet.

  #### Parameters

  - ##### value: string

    The name of the facet value to verify.

  #### Returns boolean

### reset

- reset(): void

- Inherited from DynamicFacet.reset

  - Defined in ui/DynamicFacet/DynamicFacet.ts :513

  Deselects all values in this facet.

  Does not trigger a query automatically. Updates the visual of the facet.

  #### Returns void

### selectMultipleValues

- selectMultipleValues(values: string[]): void

- Inherited from DynamicFacet.selectMultipleValues

  - Defined in ui/DynamicFacet/DynamicFacet.ts :397

  Selects multiple values in this facet.

  Does not trigger a query automatically. Does not update the visual of the facet until a query is performed.

  #### Parameters

  - ##### values: string[]

    The names of the facet values to select.

  #### Returns void

### selectValue

- selectValue(value: string): void

- Inherited from DynamicFacet.selectValue

  - Defined in ui/DynamicFacet/DynamicFacet.ts :384

  Selects a single value in this facet.

  Does not trigger a query automatically. Does not update the visual of the facet until a query is performed.

  #### Parameters

  - ##### value: string

    The name of the facet value to select.

  #### Returns void

### showLessValues

- showLessValues(): void

- Inherited from DynamicFacet.showLessValues

  - Defined in ui/DynamicFacet/DynamicFacet.ts :499

  Reduces the number of displayed facet values down to numberOfValues.

  Automatically triggers an isolated query.

  #### Returns void

### showMoreValues

- showMoreValues(additionalNumberOfValues?: number): void

- Inherited from DynamicFacet.showMoreValues

  - Defined in ui/DynamicFacet/DynamicFacet.ts :487

  Requests additional values.

  Automatically triggers an isolated query.

  #### Parameters

  - ##### Default value additionalNumberOfValues: number = this.options.numberOfValues

    The number of additional values to request. Minimum value is 1. Defaults to the numberOfValues option value.

  #### Returns void

### toggleCollapse

- toggleCollapse(): void

- Inherited from DynamicFacet.toggleCollapse

  - Defined in ui/DynamicFacet/DynamicFacet.ts :530

  Collapses or expands the facet depending on it's current state.

  #### Returns void

### toggleSelectValue

- toggleSelectValue(value: string): void

- Inherited from DynamicFacet.toggleSelectValue

  - Defined in ui/DynamicFacet/DynamicFacet.ts :453

  Toggles the selection state of a single value in this facet.

  Does not trigger a query automatically.

  #### Parameters

  - ##### value: string

  #### Returns void

### Static get

- get(element: HTMLElement, componentClass?: any, noThrow?: boolean): BaseComponent

- Inherited from Component.get

  - Defined in ui/Base/Component.ts :410

  Get the bound component to the given HTMLElement. Throws an assert if the HTMLElement has no component bound, unless using the noThrow argument.
  If there is multiple component bound to the current HTMLElement, you must specify the component class.

  #### Parameters

  - ##### element: HTMLElement

    HTMLElement for which to get the bound component.

  - ##### Optional componentClass: any

    Optional component class. If the HTMLElement has multiple components bound, you must specify which one you are targeting.

  - ##### Optional noThrow: boolean

    Boolean option to tell the method to not throw on error.

  #### Returns BaseComponent

## Properties

### bind

bind: ComponentEvents

Inherited from Component.bind

- Defined in ui/Base/Component.ts :270

Allows the component to bind events and execute them only when it is enabled.

type

  {Coveo.ComponentEvents}

### componentOptionsModel

componentOptionsModel: ComponentOptionsModel

Inherited from Component.componentOptionsModel

- Defined in ui/Base/Component.ts :294

Contains the state of options for different components. Mainly used by ResultLink.

### componentStateModel

componentStateModel: ComponentStateModel

Inherited from Component.componentStateModel

- Defined in ui/Base/Component.ts :282

Contains the state of different components (enabled vs disabled). Allows to get/set values. Triggers component state event when modified. Each component can listen to those events.

### disabled

disabled: boolean

Inherited from BaseComponent.disabled

- Defined in ui/Base/BaseComponent.ts :23

A disabled component will not participate in the query, or listen to ComponentEvents.

type

  {boolean}

### logger

logger: Logger

Inherited from BaseComponent.logger

- Defined in ui/Base/BaseComponent.ts :18

Allows component to log in the dev console.

### queryController

queryController: QueryController

Inherited from Component.queryController

- Defined in ui/Base/Component.ts :286

Contains the singleton that allows to trigger queries.

### queryStateModel

queryStateModel: QueryStateModel

Inherited from Component.queryStateModel

- Defined in ui/Base/Component.ts :278

Contains the state of the query. Allows to get/set values. Trigger query state event when modified. Each component can listen to those events.

### root

root: HTMLElement

Inherited from Component.root

- Defined in ui/Base/Component.ts :274

A reference to the root HTMLElement (the SearchInterface).

### searchInterface

searchInterface: SearchInterface

Inherited from Component.searchInterface

- Defined in ui/Base/Component.ts :290

A reference to the root of every component, the SearchInterface.

### Static ID

ID: string

Inherited from BaseComponent.ID

- Defined in ui/Base/BaseComponent.ts :28

The static ID that each component needs in order to be identified.
For example, SearchButton -> static ID: SearchButton -> className: CoveoSearchButton

## Accessors

### usageAnalytics

- get (): IAnalyticsClient

- Inherited from Component.usageAnalytics

  - Defined in ui/Base/Component.ts :343

  A reference to the Analytics.client.

  #### Returns IAnalyticsClient

## Component Options

### currencySymbol

currencySymbol: string

- Defined in ui/DynamicFacet/DynamicFacetRange.ts :94

The currency symbol to use if the `valueFormat` is `currency`.

By default, the component uses the currency associated with the currently loaded culture file (see Changing the Language of Your Search Interface).

Markup configuration example(s) :

    data-currency-symbol='foo'

### numberOfDecimals

numberOfDecimals: number

- Defined in ui/DynamicFacet/DynamicFacetRange.ts :88

The number of decimals to display when the `valueFormat` is `number`

By default, the number of decimals is what's returned by the index.

Markup configuration example(s) :

    data-number-of-decimals='2'

### ranges

ranges: IRangeValue[]

- Defined in ui/DynamicFacet/DynamicFacetRange.ts :102

The list of range values to request (see Requesting Specific FacetRange Values).

This value will override the `numberOfValues` value.

If this option is not defined, the index will try to generate automatic ranges.

### sortOrder

sortOrder: FacetRangeSortOrder

- Defined in ui/DynamicFacet/DynamicFacetRange.ts :113

The sort order to use for this facet.

Can be either `ascending` or `descending`.

Default: `ascending`.

### valueFormat

valueFormat: DynamicFacetRangeValueFormat

- Defined in ui/DynamicFacet/DynamicFacetRange.ts :67

The string format to apply to the minimum and maximum value of each range displayed in the facet.

See `DynamicFacetRangeValueFormat` for the list and description of allowed formats.

Default: If the `field` contains "date", the format will be `date`. Else, it will be `number`.

Markup configuration example(s) :

    data-value-format='date'

### valueSeparator

valueSeparator: string

- Defined in ui/DynamicFacet/DynamicFacetRange.ts :51

The label to insert between the minimum and maximum value of each range displayed in the facet.

Default: The localized string for `to`.

Markup configuration example(s) :

    data-value-separator='until'
    data-value-separator='up to'

## Constructors

### constructor

- new DynamicFacetRange(element: HTMLElement, options: IDynamicFacetRangeOptions, bindings?: IComponentBindings): DynamicFacetRange

- Overwrites DynamicFacet.constructor

  - Defined in ui/DynamicFacet/DynamicFacetRange.ts :130

  Creates a new `DynamicFacetRange` instance.

  #### Parameters

  - ##### element: HTMLElement

    The element from which to instantiate the component.

  - ##### options: IDynamicFacetRangeOptions

    The component options.

  - ##### Optional bindings: IComponentBindings

    The component bindings. Automatically resolved by default.

  #### Returns DynamicFacetRange

### Implements

- IDynamicFacet
- IComponentBindings