# Coveo FacetRange Component (CoveoFacetRange)

A `FacetRange` 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 `Facet` component and supports all `Facet` options except:

- Settings menu options
  - `enableSettings`
  - `enableSettingsFacetState`
  - `enableCollapse`
  - `availableSorts`
  - `customSort`
  - `computedFieldCaption`
- Facet Search options
  - `enableFacetSearch`
  - `facetSearchDelay`
  - `facetSearchIgnoreAccents`
  - `numberOfValuesInFacetSearch`
- More and Less options
  - `enableMoreLess`
  - `pageSize`

Not supported in

  Coveo for Salesforce Free

## Index

### Methods

- collapse
- debugInfo
- deselectMultipleValues
- deselectValue
- disable
- enable
- excludeMultipleValues
- excludeValue
- expand
- getBindings
- getCaptionForStringValue
- getDisplayedFacetValues
- getDisplayedValues
- getEndpoint
- getExcludedValues
- getSelectedValues
- getValueCaption
- hasSelectedValue
- hideWaitingAnimation
- reset
- selectMultipleValues
- selectValue
- showLess
- showMore
- showWaitingAnimation
- switchToAnd
- switchToOr
- toggleExcludeValue
- toggleSelectValue
- unexcludeMultipleValues
- unexcludeValue
- updateSort
- get

### Properties

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

### Accessors

- usageAnalytics

### Component Options

- dateField
- ranges
- valueFormat

### Constructors

- constructor

## Methods

### collapse

- collapse(): void

- Inherited from Facet.collapse

  - Defined in ui/Facet/Facet.ts :1253

  Collapses the facet.

  #### 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: FacetValue[] | string[]): void

- Inherited from Facet.deselectMultipleValues

  - Defined in ui/Facet/Facet.ts :906

  Deselects multiple values.

  Does not trigger a query automatically.

  #### Parameters

  - ##### values: FacetValue[] | string[]

    Can be an array of `FacetValue` or an array of strings.

  #### Returns void

### deselectValue

- deselectValue(value: FacetValue | string): void

- Inherited from Facet.deselectValue

  - Defined in ui/Facet/Facet.ts :892

  Deselects a single value.

  Does not trigger a query automatically.

  #### Parameters

  - ##### value: FacetValue | string

    Can be a `FacetValue` or a string (e.g., `deselectValue('foobar')` or `deselectValue(new FacetValue('foobar'))`).

  #### 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

### excludeMultipleValues

- excludeMultipleValues(values: FacetValue[] | string[]): void

- Inherited from Facet.excludeMultipleValues

  - Defined in ui/Facet/Facet.ts :937

  Excludes multiple values.

  Does not trigger a query automatically.

  #### Parameters

  - ##### values: FacetValue[] | string[]

    Can be an array of `FacetValue` or an array of strings.

  #### Returns void

### excludeValue

- excludeValue(value: FacetValue | string): void

- Inherited from Facet.excludeValue

  - Defined in ui/Facet/Facet.ts :923

  Excludes a single value.

  Does not trigger a query automatically.

  #### Parameters

  - ##### value: FacetValue | string

    Can be a `FacetValue` or a string (e.g., `excludeValue('foobar')` or `excludeValue(new FacetValue('foobar'))`).

  #### Returns void

### expand

- expand(): void

- Inherited from Facet.expand

  - Defined in ui/Facet/Facet.ts :1263

  Expands the facet.

  #### 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 Facet.getCaptionForStringValue

  - Defined in ui/Facet/Facet.ts :1211

  Returns the configured caption for a desired facet value.

  #### Parameters

  - ##### value: string

    The string facet value whose caption the method should return.

  #### Returns string

### getDisplayedFacetValues

- getDisplayedFacetValues(): FacetValue[]

- Inherited from Facet.getDisplayedFacetValues

  - Defined in ui/Facet/Facet.ts :1019

  Returns the currently displayed values as an array of `FacetValue`.

  #### Returns FacetValue[]

  The currently displayed values.

### getDisplayedValues

- getDisplayedValues(): string[]

- Inherited from Facet.getDisplayedValues

  - Defined in ui/Facet/Facet.ts :1010

  Returns the currently displayed values as an array of strings.

  #### Returns string[]

  The currently displayed values.

### getEndpoint

- getEndpoint(): ISearchEndpoint

- Inherited from Facet.getEndpoint

  - Defined in ui/Facet/Facet.ts :1093

  Returns the endpoint for the facet.

  #### Returns ISearchEndpoint

  The endpoint for the facet.

### getExcludedValues

- getExcludedValues(): string[]

- Inherited from Facet.getExcludedValues

  - Defined in ui/Facet/Facet.ts :1049

  Returns the currently excluded values as an array of strings.

  #### Returns string[]

  The currently excluded values.

### getSelectedValues

- getSelectedValues(): string[]

- Inherited from Facet.getSelectedValues

  - Defined in ui/Facet/Facet.ts :1031

  Returns the currently selected values as an array of strings.

  #### Returns string[]

  The currently selected values.

### getValueCaption

- getValueCaption(facetValue: IIndexFieldValue | FacetValue | string): string

- Inherited from Facet.getValueCaption

  - Defined in ui/Facet/Facet.ts :1188

  Returns the configured caption for the given `FacetValue`.

  #### Parameters

  - ##### facetValue: IIndexFieldValue | FacetValue | string

    The `FacetValue` whose caption the method should return.

  #### Returns string

### hasSelectedValue

- hasSelectedValue(value: string): boolean

- Inherited from Facet.hasSelectedValue

  - Defined in ui/Facet/Facet.ts :1040

  Determines whether the specified value is selected in the facet.

  #### Parameters

  - ##### value: string

    The name of the facet value to verify.

  #### Returns boolean

### hideWaitingAnimation

- hideWaitingAnimation(): void

- Inherited from Facet.hideWaitingAnimation

  - Defined in ui/Facet/Facet.ts :1146

  Hides the waiting animation in the facet header.

  #### Returns void

### reset

- reset(): void

- Inherited from Facet.reset

  - Defined in ui/Facet/Facet.ts :1057

  Resets the facet by un-selecting all values, un-excluding all values, and redrawing the facet.

  #### Returns void

### selectMultipleValues

- selectMultipleValues(values: FacetValue[] | string[]): void

- Inherited from Facet.selectMultipleValues

  - Defined in ui/Facet/Facet.ts :875

  Selects multiple values.

  Does not trigger a query automatically.

  #### Parameters

  - ##### values: FacetValue[] | string[]

    Can be an array of `FacetValue` or an array of strings.

  #### Returns void

### selectValue

- selectValue(value: FacetValue | string): void

- Inherited from Facet.selectValue

  - Defined in ui/Facet/Facet.ts :861

  Selects a single value.

  Does not trigger a query automatically.

  #### Parameters

  - ##### value: FacetValue | string

    Can be a `FacetValue` or a string (e.g., `selectValue('foobar')` or `selectValue(new FacetValue('foobar'))`).

  #### Returns void

### showLess

- showLess(): void

- Inherited from Facet.showLess

  - Defined in ui/Facet/Facet.ts :1240

  Shows less elements in the Facet (up to the original number of values).

  See the `enableMoreLess`, and `numberOfValues` options.

  #### Returns void

### showMore

- showMore(): void

- Inherited from Facet.showMore

  - Defined in ui/Facet/Facet.ts :1224

  Shows the next page of results in the facet.

  See the `enableMoreLess`, and `pageSize` options.

  Triggers a query if needed, or displays the already available values.

  #### Returns void

### showWaitingAnimation

- showWaitingAnimation(): void

- Inherited from Facet.showWaitingAnimation

  - Defined in ui/Facet/Facet.ts :1135

  Shows a waiting animation in the facet header (a spinner).

  #### Returns void

### switchToAnd

- switchToAnd(): void

- Inherited from Facet.switchToAnd

  - Defined in ui/Facet/Facet.ts :1071

  Switches the facet to `AND` mode.

  See the `useAnd`, and `enableTogglingOperator` options.

  #### Returns void

### switchToOr

- switchToOr(): void

- Inherited from Facet.switchToOr

  - Defined in ui/Facet/Facet.ts :1083

  Switches the facet to `OR` mode.

  See the `useAnd`, and `enableTogglingOperator` options.

  #### Returns void

### toggleExcludeValue

- toggleExcludeValue(value: FacetValue | string): void

- Inherited from Facet.toggleExcludeValue

  - Defined in ui/Facet/Facet.ts :998

  Toggles the exclusion state of a single value (excludes the value if it is not already excluded; un-excludes the value if it is already excluded).

  Does not trigger a query automatically.

  #### Parameters

  - ##### value: FacetValue | string

    Can be a `FacetValue` or a string.

  #### Returns void

### toggleSelectValue

- toggleSelectValue(value: FacetValue | string): void

- Inherited from Facet.toggleSelectValue

  - Defined in ui/Facet/Facet.ts :983

  Toggles the selection state of a single value (selects the value if it is not already selected; un-selects the value if it is already selected).

  Does not trigger a query automatically.

  #### Parameters

  - ##### value: FacetValue | string

    Can be a `FacetValue` or a string.

  #### Returns void

### unexcludeMultipleValues

- unexcludeMultipleValues(values: FacetValue[] | string[]): void

- Inherited from Facet.unexcludeMultipleValues

  - Defined in ui/Facet/Facet.ts :967

  Unexcludes multiple values.

  Does not trigger a query automatically.

  #### Parameters

  - ##### values: FacetValue[] | string[]

    Can be an array of `FacetValue` or an array of strings.

  #### Returns void

### unexcludeValue

- unexcludeValue(value: FacetValue | string): void

- Inherited from Facet.unexcludeValue

  - Defined in ui/Facet/Facet.ts :953

  Unexcludes a single value.

  Does not trigger a query automatically.

  #### Parameters

  - ##### value: FacetValue | string

    Can be a `FacetValue` or a string.

  #### Returns void

### updateSort

- updateSort(criteria: string): void

- Inherited from Facet.updateSort

  - Defined in ui/Facet/Facet.ts :1106

  Changes the sort parameter for the facet.

  See Facet.options.availableSorts for the list of possible values.

  Also triggers a new query.

  #### Parameters

  - ##### criteria: string

    The new sort parameter for the facet.

  #### 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}

### facetSearch

facetSearch: FacetSearch

Inherited from Facet.facetSearch

- Defined in ui/Facet/Facet.ts :731

Renders and handles the facet Search part of the component.

### facetSettings

facetSettings: FacetSettings

Inherited from Facet.facetSettings

- Defined in ui/Facet/Facet.ts :736

Renders and handles the facet Settings part of the component

### 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

### dateField

dateField: boolean

- Defined in ui/FacetRange/FacetRange.ts :71

Whether the specified `field` option value targets a date field in your index.

This allows the component to correctly build the outgoing Group By.

Default: `false`.

Default

  `false`

Markup configuration example(s) :

    data-date-field='true'
    data-date-field='false'

### ranges

ranges: IRangeValue[]

- Defined in ui/FacetRange/FacetRange.ts :81

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

By default, the index automatically generates range values.

Note:

> The index cannot automatically generate range values for a `FacetRange` whose `field` option value references a dynamic field generated by a query function. In such a case, you must use the `ranges` option.

### valueFormat

valueFormat: string

- Defined in ui/FacetRange/FacetRange.ts :96

The format to apply to the range values. Only works for numeric values.

Some of the most commonly used formats are:

- `c0`: format a numeric value as currency.
- `n0`: formats a numeric value as an integer.
- `n2`: formats a numeric value as a floating point number with two decimal digits.

The available formats are defined in the Globalize library.

Note: This option is ignored when the `valueCaption` is defined.

Default

  `n0`

Markup configuration example(s) :

    data-value-format='foo'

## Constructors

### constructor

- new FacetRange(element: HTMLElement, options: IFacetRangeOptions, bindings?: IComponentBindings): FacetRange

- Overwrites Facet.constructor

  - Defined in ui/FacetRange/FacetRange.ts :101

  Creates a new `FacetRange`.

  #### Parameters

  - ##### element: HTMLElement

    The HTML element on which to instantiate the component.

  - ##### options: IFacetRangeOptions

    The configuration options to apply when creating the component.

  - ##### Optional bindings: IComponentBindings

    The bindings required by the component.

  #### Returns FacetRange

### Implements

- IFieldValueCompatibleFacet
- IComponentBindings