Coveo Date Facet Slider

Implements the Coveo JavaScript Search Framework FacetSlider component to filter results based on a date field value, using a slider widget to define a date interval.

Usage Notes

  • The Sitecore date field which the facet is based on must be included for indexing in the Templates table of the Indexing Manager (see About the Indexing Manager - Fields).

  • Dragging and releasing a facet slider button triggers a new Search API call.

Insertion Location

The Coveo Date Facet Slider rendering is an Allowed Control in the following placeholder(s): Facets

Example insertion sequence for the Coveo Date Facet Slider rendering.

Coveo for Sitecore SXA rendering insertion locations aren’t limited by placeholder Allowed Controls. The Coveo Date Facet Slider rendering may therefore be inserted throughout the partial design, whether in Coveo for Sitecore or Sitecore placeholders.

Example insertion sequence for the Coveo Date Facet Slider rendering.

Data Source Options

Option name Description
Title See title component option
Field See field component option
Facet name See id component option
Allow users to change the slider minimum value See rangeSlider component option
Number of steps See steps component option
Decimal rounded See rounded component option
Date format The date format to use to display date values. Uses the Globalize JavaScript plugin format
Display as percentage See displayAsPercent component option
Separator The separator to display (see displayAsValue component option)
Units The units to display (see displayAsValue component option)
Minimum See start component option
Maximum See end component option
Apply filter expression only when slider range is modified See excludeOuterBounds component option
Display graph See graph component option
Graph number of steps See graph component option
DOM unique Id Randomly generated HTML element id.
Additional data attributes Allows use of the Coveo JavaScript Search Framework FacetSlider component options that aren't directly available in the data source.

Sample Generated HTML and Corresponding Visual Output

<div id="coveodc1b7e87" class="CoveoFacetSlider coveo-disabled"
data-display-as-percent-enabled="false" data-end="2020-08-31" data-prebind-field="fieldTranslator"
data-field="@evdate" data-id="evdate" data-range-slider="true" data-start="2020-07-29"
data-title="Event Date" data-date-field="true" data-applied-prebind="true">

Image of sample date facet slider

What's Next for Me?