Support Menu

Coveo component FacetSlider

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 Components - Passing Component Options in the init Call), or before the init call, using the options top-level function (see Components - Passing Component Options Before the init Call).

Index

Component Options

dateField

dateField: boolean

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.

Markup configuration example(s) :
data-date-field='true'
data-date-field='false'

dateFormat

dateFormat: string

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

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 "-".

displayAsValue

displayAsValue: any

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 "-".

dropdownHeaderLabel

dropdownHeaderLabel: string

Specifies the label of the button which the end user can click to display the facets when in responsive mode. If this option is configured more than once, the button uses the first occurrence of the option as its label.

Default value is "Filters".

Markup configuration example(s) :
data-dropdown-header-label='foo'

enableResponsiveMode

enableResponsiveMode: boolean

Specifies whether to enable responsive mode for facets. Setting this options to false on any Facet or FacetSlider in a search interface disables responsive mode for all other facets in the search interface.

Responsive mode displays all facets under a single dropdown button whenever the width of the HTML element which the search interface is bound to reaches or falls behind a certain threshold (see SearchInterface.responsiveComponents).

See also the FacetSlider dropdownHeaderLabel option.

Default value is true.

Markup configuration example(s) :
data-enable-responsive-mode='true'
data-enable-responsive-mode='false'

end

end: string

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.

Markup configuration example(s) :
data-end='foo'

excludeOuterBounds

excludeOuterBounds: boolean

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

Default value is false.

Markup configuration example(s) :
data-exclude-outer-bounds='true'
data-exclude-outer-bounds='false'

field

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 Fields to a Source).

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

Markup configuration example(s) :
data-field='@foo'

getSteps

getSteps: function

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 Components - Passing Component Options in the init Call), or before the init call, using the options top-level function (see Components - 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

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.

id

id: string

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

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

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

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

Default (and minimum) value is 0.

Markup configuration example(s) :
data-rounded='10'

start

start: string

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.

Markup configuration example(s) :
data-start='foo'

steps

steps: number

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.

Markup configuration example(s) :
data-steps='10'

title

title: string

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

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 Components - Passing Component Options in the init Call), or before the init call, using the options top-level function (see Components - 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

Methods

debugInfo

  • debugInfo(): any

disable

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

    Returns void

enable

  • enable(): void
  • 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

getSelectedValues

  • getSelectedValues(): number[]
  • 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
  • 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

setSelectedValues

  • setSelectedValues(values: number[]): void
  • 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
  • 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

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

type

{Coveo.ComponentEvents}

componentOptionsModel

componentOptionsModel: ComponentOptionsModel

Contains the state of options for differents component. Mainly used by ResultLink.

componentStateModel

componentStateModel: ComponentStateModel

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

disabled

disabled: boolean

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

type

{boolean}

logger

logger: Logger

Allows component to log in the dev console.

queryController

queryController: QueryController

Contains the singleton that allows to trigger queries.

queryStateModel

queryStateModel: QueryStateModel

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

A reference to the root HTMLElement (the SearchInterface).

searchInterface

searchInterface: SearchInterface

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

usageAnalytics

usageAnalytics: IAnalyticsClient

A reference to the Analytics.client.

Static ID

ID: string

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

Constructors

constructor

  • 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