Support Menu

Coveo component FacetSlider

The FacetSlider component creates a facet containing a slider widget that allows the end user to filter results based on a range of numerical values, rather than a "classic" multi-select Facet with a label and a count for each value.

Note that this component does not inherit from the Facet component, and thus does not offer the same configuration options. Also, some of the FacetSlider options cannot be set as a HTML attributes on the component and must rather be configured in the init call of the search interface.

Examples:

Specifying the FacetSlider configuration using a JSON inside the init call. Note that the JSON follows the FacetSlider options:

// You can call the init script using "pure" JavaScript:
Coveo.init(document.querySelector('#search'), {
   FacetSlider: {
     field: "@size",
     start: 1000,
     end: 5000,
     rangeSlider: true,
     graph: {
       steps: 10
     }
   }
})

// Or you can call the init script using the jQuery extension:
$('#search').coveo('init', {
   FacetSlider: {
     field: "@size",
     start: 1000,
     end: 5000,
     rangeSlider: true,
     graph: {
       steps: 10
     }
   }
})

Specifying the same FacetSlider configuration by setting the corresponding HTML attributes directly in the markup:

<div class='CoveoFacetSlider' data-field='@size' data-start='1000' data-end='5000' data-range-slider='true' data-graph-steps='10'></div>

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 to display values if they are dates.

Default value is "MMM dd, yyyy".

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

displayAsPercent

displayAsPercent: any

Specifies the percentage caption options to use to display 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 to display 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 that allows to show the facets when in responsive mode. If it is specified more than once, the first occurence of the option will be used. The 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 FacetSlider.options.dropdownHeaderLabel.

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 FacetSlider.options.dateField is 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.

This requires the given field to be configured correctly in the index as a Facet field (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 steps for the FacetSlider (see FacetSlider.options.steps. This function receives the FacetSlider boundaries (see FacetSlider.options.start and FacetSlider.options.end) and must return an array of numbers (the steps).

You can only set this option in the init call of your search interface. You cannot set it directly in the markup as an HTML attribute.

Example:

// You can call the init script using "pure" JavaScript:
Coveo.init(document.querySelector('#search'), {
   FacetSlider: {
     field: "@size",
     getSteps: function(start, end) {
       return [0,2,4,6,8,10];
     }
   }
})

// Or you can call the init script using the jQuery extension:
$('#search').coveo('init', {
   FacetSlider: {
       field: "@size",
       getSteps: function(start, end) {
           return [0,2,4,6,8,10];
       }
   }
})

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 on 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 FacetSlider.options.field option value.

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

queryOverride

queryOverride: string

Specifies the query to filter automatic minimum and maximum range of the slider.

This is especially useful for date ranges where the index may contain values which are not set, and thus the automatic range returns values from the year 1400 (earliest date from the boost C++ library).

This option can be useful to do something like queryOverride : @date>2000/01/01 or some arbitrary date which will filter out unwanted values.

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 FacetSlider.options.dateField is 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 option is 1

Default value is undefined, and the slider allows all values. Minimum value is 2.

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

title

title: string

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

Default value is the localized string for "NoTitle".

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

valueCaption

valueCaption: function

Specifies a function to generate the caption for the FacetSlider. Receives the current slider values (number[]) and must return the caption (string).

You can only set this option in the init call of your search interface. You cannot set it directly in the markup as an HTML attribute.

Example:

// You can call the init script using "pure" JavaScript:
Coveo.init(document.querySelector('#search'), {
   FacetSlider: {
     field: "@size",
     valueCaption: function(values) {
       return values[0] + " hello" + ", " + values[1] + " world";
     }
   }
})

// Or you can call the init script using the jQuery extension:
$('#search').coveo('init', {
   FacetSlider: {
     field: "@size",
     valueCaption: function(values) {
       return values[0] + " hello" + ", " + values[1] + " world";
     }
   }
})

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

    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