# Coveo FacetSlider Component (CoveoFacetSlider)

The `FacetSlider` component creates a facet which contains a slider widget that allows the end user to filter results based on a range of numerical values (e.g., a date range, a price range, etc.).

Note:

> This component does not inherit from the `Facet` component. Consequently, it does not offer the same configuration options. Moreover, some of the `FacetSlider` options (see `getSteps` and `valueCaption`) cannot be configured as `data-` attributes in the markup. If you wish to configure those options, you must either do so in the `init` call of your search interface (see Passing Component Options in the init Call), or before the `init` call, using the `options` top-level function (see Passing Component Options Before the init Call).

Not supported in

  Coveo for Salesforce Free

## Index

### Methods

- debugInfo
- disable
- enable
- getBindings
- getSelectedValues
- isActive
- reset
- setSelectedValues
- get

### Properties

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

### Accessors

- usageAnalytics

### Component Options

- dateField
- dateFormat
- displayAsPercent
- displayAsValue
- end
- excludeOuterBounds
- field
- getSteps
- graph
- id
- queryOverride
- rangeSlider
- rounded
- start
- steps
- title
- valueCaption

### Constructors

- constructor

## Methods

### debugInfo

- debugInfo(): any

- Inherited from BaseComponent.debugInfo

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

  Return the debug info about this component.

  #### Returns any

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

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

### getSelectedValues

- getSelectedValues(): number[]

- - Defined in ui/FacetSlider/FacetSlider.ts :433

  Gets the current selection in the slider.

  Note:

  > This method returns an array of number for selected date values. These numbers represent a number of milliseconds before or after January 1, 1970. Therefore, you can use these numbers to instantiate standard JavaScript Date objects.

  #### Returns number[]

  An array of number containing the first and last selected values, if possible. An array containing two `undefined` values otherwise.

### isActive

- isActive(): boolean

- - Defined in ui/FacetSlider/FacetSlider.ts :463

  Indicates whether the `FacetSlider` is active. An active `FacetSlider` outputs an expression in the query when a search is performed.

  #### Returns boolean

  `true` if the FacetSlider is active; `false` otherwise.

### reset

- reset(): void

- - Defined in ui/FacetSlider/FacetSlider.ts :414

  Resets the `FacetSlider` (meaning that you need to set the range value as inactive).

  #### Returns void

### setSelectedValues

- setSelectedValues(values: number[]): void

- - Defined in ui/FacetSlider/FacetSlider.ts :450

  Sets the selected values in the slider.

  Note:

  > You must set date values with numbers representing a number of milliseconds before or after January 1, 1970. You can easily extract such numbers from standard JavaScript Date objects.

  #### Parameters

  - ##### values: number[]

    An array containing the first and last values to select in the slider.

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

### dateField

dateField: boolean

- Defined in ui/FacetSlider/FacetSlider.ts :88

Specifies whether the `field` for which you are requesting a range is a date field. This allows the `FacetSlider` to correctly build the outgoing GroupByRequest and render itself properly.

Default value is `false`.

Default

  `false`

Markup configuration example(s) :

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

### dateFormat

dateFormat: string

- Defined in ui/FacetSlider/FacetSlider.ts :120

Specifies the format to use when displaying date values.

See also the `dateField` option.

Default value is `MMM dd, yyyy`.

Markup configuration example(s) :

    data-date-format='foo'

### displayAsPercent

displayAsPercent: any

- Defined in ui/FacetSlider/FacetSlider.ts :219

Specifies the percentage caption options to use when displaying the field values.

Available options are:

- enable (`data-display-as-percent-enable`): boolean; specifies whether to display the caption as a percentage. Default value is `false`. separator (`data-display-as-percent-separator`): string; specifies the character(s) to use as a separator in the caption. Default value is `"-"`.

Default

  `false`

### displayAsValue

displayAsValue: any

- Defined in ui/FacetSlider/FacetSlider.ts :201

Specifies the caption options to use when displaying the field values.

Available options are:

- enable (`data-display-as-value-enable`): boolean; specifies whether to display the caption as a value. Default value is `true`.
- unitSign (`data-display-as-value-unit-sign`): string; specifies the unit sign for this value (e.g., `$`). Default value is `undefined`.
- separator (`data-display-as-value-separator`): string; specifies the character(s) to use as a separator in the caption. Default value is `"-"`.

Default

  `true`

### end

end: any

- Defined in ui/FacetSlider/FacetSlider.ts :155

Specifies the ending boundary of the slider.

Date values are rounded to the nearest year when you set the `dateField` option to `true`.

Default value is the highest available field value in the index.

### excludeOuterBounds

excludeOuterBounds: boolean

- Defined in ui/FacetSlider/FacetSlider.ts :162

Specifies whether to exclude the outer bounds of the slider in the generated query when they are not active.

Default value is `false`.

Default

  `false`

Markup configuration example(s) :

    data-exclude-outer-bounds='true'
    data-exclude-outer-bounds='false'

### field

field: IFieldOption

- Defined in ui/FacetSlider/FacetSlider.ts :98

Specifies the index field whose values the `FacetSlider` should use.

The field must be configured correctly as a Facet field in the index (see Adding and Managing Fields).

Specifying a value for this option is required for the `FacetSlider` component to work.

Required

  Specifying a value for this option is required for the component to work

Markup configuration example(s) :

    data-field='@foo'

### getSteps

getSteps: function

- Defined in ui/FacetSlider/FacetSlider.ts :288

Specifies a function to generate the `FacetSlider` steps (see the `steps` option). This function receives the `FacetSlider` boundaries (see the `start` and `end` options), and must return an array of numbers (the steps).

Note:

> You cannot set this option directly in the component markup as an HTML attribute. You must either set it in the `init` call of your search interface (see Passing Component Options in the init Call), or before the `init` call, using the `options` top-level function (see Passing Component Options Before the init Call).

Example:

    var myGetStepsFunction = function(start, end) {
      var result = [];
      for (i = start; i < end; i += 2) {
        result.push(i);
      }
      return result;
    }

    // You can set the option in the 'init' call:
    Coveo.init(document.querySelector("#search"), {
       FacetSlider: {
         getSteps: myGetStepsFunction
       }
    });

    // Or before the 'init' call, using the 'options' top-level function:
    // Coveo.options(document.querySelector("#search"), {
    //   FacetSlider : {
    //     valueCaption : myGetStepsFunction
    //   }
    // });

#### Type declaration

- - (start: number, end: number): number[]

  - #### Parameters

    - ##### start: number

    - ##### end: number

    #### Returns number[]

### graph

graph: any

- Defined in ui/FacetSlider/FacetSlider.ts :234

Specifies whether to display a small graph on top of the slider.

Available options are:

- steps (`data-graph-steps`): number; specifies the number of steps/columns to display in your graph. Default value is `10`. Minimum value is `2`.

Minimum

  `2`

### id

id: string

- Defined in ui/FacetSlider/FacetSlider.ts :109

Specifies a unique identifier for the `FacetSlider`. Among other things, this identifier serves the purpose of saving the facet state in the URL hash.

If you have two facets with the same field in the same page, you should specify a unique `id` value for at least one of those two facets. This `id` must be unique in the page.

Default value is the `field` option value.

Markup configuration example(s) :

    data-id='foo'

### queryOverride

queryOverride: string

- Defined in ui/FacetSlider/FacetSlider.ts :135

Specifies a query to filter automatic minimum and maximum values for the slider range.

This is especially useful in the case of date ranges since the index may contain values which are not set, and thus return values from the year 1400 (the earliest date from the boost C++ library).

Example:

The query override in the following markup filters out any `@date` value anterior to January 1st 2000.

    <div class="CoveoFacetSlider" data-field="@date" data-date-field="true" data-query-override="@date>2000/01/01"></div>

Markup configuration example(s) :

    data-query-override='foo'

### rangeSlider

rangeSlider: boolean

- Defined in ui/FacetSlider/FacetSlider.ts :188

Specifies whether you want a slider with two buttons instead of a slider with a single button.

By default, only one button appears in the slider.

Markup configuration example(s) :

    data-range-slider='true'
    data-range-slider='false'

### rounded

rounded: number

- Defined in ui/FacetSlider/FacetSlider.ts :169

Specifies the number of decimal places to round the displayed numerical values to.

Default (and minimum) value is `0`.

Minimum

  `0`

Markup configuration example(s) :

    data-rounded='10'

### start

start: any

- Defined in ui/FacetSlider/FacetSlider.ts :145

Specifies the starting boundary of the slider.

Date values are rounded to the nearest year when you set the `dateField` option to `true`.

Default value is the lowest available field value in the index.

### steps

steps: number

- Defined in ui/FacetSlider/FacetSlider.ts :181

Specifies the number of steps to split the slider into.

For example, if your range is [ 0 , 100 ] and you specify `10` steps, then the end user can move the slider only to the values [ 0, 10, 20, 30 ... , 100 ].

For performance reasons, the maximum value for this option is `100`

Default value is `undefined`, and the slider allows up to 100 steps. Minimum value is `2`.

Minimum

  `2`

Markup configuration example(s) :

    data-steps='10'

### title

title: string

- Defined in ui/FacetSlider/FacetSlider.ts :76

Specifies the title to display on top of the `FacetSlider`.

Default value is the localized string for `NoTitle`.

Markup configuration example(s) :

    data-title='foo'

### valueCaption

valueCaption: function

- Defined in ui/FacetSlider/FacetSlider.ts :325

Specifies a function to generate the value caption for the `FacetSlider`. This function receives the current slider values (number[]), and must return the caption (string).

Note:

> You cannot set this option directly in the component markup as an HTML attribute. You must either set it in the `init` call of your search interface (see Passing Component Options in the init Call), or before the `init` call, using the `options` top-level function (see Passing Component Options Before the init Call).

Example:

    var myValueCaptionFunction = function(values) {
      return "From " + values[0] + " to " + values[1];
    }

    // You can set the option in the 'init' call:
    Coveo.init(document.querySelector("#search"), {
      FacetSlider: {
        valueCaption: myValueCaptionFunction
      }
    });

    // Or before the 'init' call, using the 'options' top-level function:
    // Coveo.options(document.querySelector("#search"), {
    //   FacetSlider : {
    //     valueCaption : myValueCaptionFunction
    //   }
    // });

#### Type declaration

- - (values: number[]): string

  - #### Parameters

    - ##### values: number[]

    #### Returns string

## Constructors

### constructor

- new FacetSlider(element: HTMLElement, options: IFacetSliderOptions, bindings?: IComponentBindings, slider?: Slider): FacetSlider

- Overwrites Component.constructor

  - Defined in ui/FacetSlider/FacetSlider.ts :355

  Creates a new `FacetSlider` component. Binds multiple query events as well.

  #### Parameters

  - ##### element: HTMLElement

    The HTMLElement on which to instantiate the component.

  - ##### options: IFacetSliderOptions

    The options for the `FacetSlider` component.

  - ##### Optional bindings: IComponentBindings

    The bindings that the component requires to function normally. If not set, these will be automatically resolved (with a slower execution time).

  - ##### Optional slider: Slider

  #### Returns FacetSlider